How to fix site header when tab is shrunk

TimothyM · February 1, 2023

Hello,

Wondering how to have my site header not do this when the tab is shrunk down. Any help would be appreciated!

tuanphan · February 1, 2023

Hi,

What is site url?

TimothyM · February 1, 2023

The URL is Nauticalchartwallpaper.com

tuanphan · February 3, 2023

It looks like you used CSS code to make left right menu.

Can you disable these code, then change layout to Left Nav - Middle Logo? We can give new code to achieve similar effect & have no problem above

If the site is live & you can't do this, you can duplicate the site & do there

TimothyM · February 3, 2023

Thanks so much for your help!

I've duplicated the site and moved the header to how you said. How do I give you access to the duplicated site?

tuanphan · February 5, 2023

On 2/4/2023 at 2:32 AM, TimothyM said:

Thanks so much for your help!

I've duplicated the site and moved the header to how you said. How do I give you access to the duplicated site?

You can see this:

TimothyM · February 7, 2023

Alright, Here is the link

https://robin-synthesizer-8tep.squarespace.com/

password is: nautical

tuanphan · February 9, 2023

On 2/7/2023 at 7:11 AM, TimothyM said:

Alright, Here is the link

https://robin-synthesizer-8tep.squarespace.com/

password is: nautical

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.header-display-desktop nav.header-nav-list').clone().appendTo('.header-display-desktop .header-actions.header-actions--right');
})
</script>
<style>
  .header-nav nav>div:nth-child(n+5) {
    display: none;
}
.header-actions.header-actions--right>nav>div:nth-child(-n+4) {
    display: none;
}
.header-actions.header-actions--right>nav:nth-child(2) {
    display: none;
}
.header-nav-item:not(:last-child) {
    margin-right: 1.5vw;
}
</style>

TimothyM · February 9, 2023

Hello,

Thanks for the help, I think I may have down something wrong. I put the code in the "footer" section as you said and got this result.

tuanphan · February 10, 2023

On 2/3/2023 at 3:30 PM, tuanphan said:

It looks like you used CSS code to make left right menu.

Can you disable these code, then change layout to Left Nav - Middle Logo? We can give new code to achieve similar effect & have no problem above

If the site is live & you can't do this, you can duplicate the site & do there

Have you disabled the current CSS code yet?

TimothyM · February 10, 2023

Hello,

Thanks so much for the help, It works flawlessly now!

How to fix site header when tab is shrunk

Recommended Posts

TimothyM

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

tuanphan

Link to comment

TimothyM

Link to comment

tuanphan

Link to comment

TimothyM

Link to comment

tuanphan

Link to comment

TimothyM

Link to comment

tuanphan

Link to comment

TimothyM

Link to comment

tuanphan

Link to comment

TimothyM

Link to comment

Create an account or sign in to comment

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources