Jump to content

Navigation and Footer overflow; how to adjust according to window size?

Recommended Posts

Site URL: https://studiolexie.com/

Hi, my navigation will flow out of the window. As I kept reducing the window size on desktop, only "services" is left and all other navigation disappeared. I would like to reduce the space between the logo and the navigation titles, so that all navigation is visible inside the window (desktop/tablet)

For the footer, the link automatically break into two lines when I reduce window size. I would like it to reduce word spacing so it is kept as one line on desktop/tablet.

How can i do this? Thanks.

Screenshot 2022-04-15 at 8.30.16 AM.png

Screenshot 2022-04-15 at 8.30.21 AM.png

Screenshot 2022-04-15 at 8.30.32 AM.png

Screenshot 2022-04-15 at 8.30.39 AM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 4/15/2022 at 1:36 PM, studiolexie said:

Site URL: https://studiolexie.com/

Hi, my navigation will flow out of the window. As I kept reducing the window size on desktop, only "services" is left and all other navigation disappeared. I would like to reduce the space between the logo and the navigation titles, so that all navigation is visible inside the window (desktop/tablet)

For the footer, the link automatically break into two lines when I reduce window size. I would like it to reduce word spacing so it is kept as one line on desktop/tablet.

How can i do this? Thanks.

Screenshot 2022-04-15 at 8.30.16 AM.png

Screenshot 2022-04-15 at 8.30.21 AM.png

Screenshot 2022-04-15 at 8.30.32 AM.png

Screenshot 2022-04-15 at 8.30.39 AM.png

I check that in footer you add the normally text, How do you think about adding the separate elements (may be a text block with link) so we can use Css to arrange the layout?

For the responsive of header when you reduce window size, kindly try the following code

@media only screen and (max-width: 1279px) {
  .header-nav-item:nth-of-type(3) {
    margin-right: 700px !important;
  }
}

@media only screen and (max-width: 1140px) {
  .header-nav-item:nth-of-type(3) {
    margin-right: 600px !important;
  }
}

@media only screen and (max-width: 1149px) {
  .header-nav-item:nth-of-type(3) {
    margin-right: 550px !important;
  }
}

@media only screen and (max-width: 1024px) {
  .header-nav-item:nth-of-type(3) {
    margin-right: 500px !important;
  }
}

@media only screen and (max-width: 959px) {
  .header-nav-item:nth-of-type(3) {
    margin-right: 450px !important;
  }
}

@media only screen and (min-width: 641px) and (max-width: 950px){
  .header-nav-item:nth-of-type(2) {
    margin-right: unset !important;
  }
  .header-nav-item:nth-of-type(3) {
    margin-right: 300px !important;
  }
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
6 hours ago, studiolexie said:

@bangank36 Hi, thanks for the suggestion. I have applied the code above but the same issue still exist. For the footer, I have changed each link into individual text element. But I would like the space between each text to be exactly the same. How could I do that?

Have you checked the result in the Incognito Mode, because SQS has a bug related to the preview from Css custom

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.