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

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.

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.

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

@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?

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