studiolexie Posted April 15, 2022 Share Posted April 15, 2022 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. Link to comment
Beyondspace Posted April 16, 2022 Share Posted April 16, 2022 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
studiolexie Posted April 18, 2022 Author Share Posted April 18, 2022 @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? Link to comment
Beyondspace Posted April 18, 2022 Share Posted April 18, 2022 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment