Jump to content

Need CSS to use main navigation on mobile view

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Looking for code to force the main desktop navigation to show on the mobile version. I created a visual navigation below my navigation bar, but have my about page linked and my contact page linked (as a button) in my main navigation. Since there are only two pages linked in my main nav, and the rest of the pages linked below in a custom nav, when you click the burger on mobile, you can only see the two pages linked in the main nav. 

Would love to override the mobile nav. Thanks in advance for your help! 🙂 

https://makennaokeeffe.com/

Edited by makennaokeeffe
  • Replies 7
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
1 hour ago, makennaokeeffe said:

@tuanphan Do you know of code for this? I always appreciate your input! 🤩

Can you share your URL here so we can check it?

If your site is not published yet, provide it a protected password, share it here so we can access your site

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

📑 Squarespace embed PDF popup (affiliate link)

Posted

You can use this to Custom CSS box

@media screen and (max-width:991px) {
    	.header-title-nav-wrapper {max-width: 40%;}
.header-display-desktop {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
    .header-actions.header-actions--right, .header-actions.header-actions--right div {
    display: flex !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@tuanphan This is amazing! Thank you! Only thing is that the spacing between the two navigation items is pretty far apart (see screenshot). Is there any way to edit or change that code to have them either be closer together, or to stack on them right justified? Thank you! 

Screen Shot 2024-08-05 at 5.07.25 PM.png

  • Solution
Posted
On 8/6/2024 at 7:09 AM, makennaokeeffe said:

@tuanphan This is amazing! Thank you! Only thing is that the spacing between the two navigation items is pretty far apart (see screenshot). Is there any way to edit or change that code to have them either be closer together, or to stack on them right justified? Thank you! 

Screen Shot 2024-08-05 at 5.07.25 PM.png

Use this new code

@media screen and (max-width:991px) {
.header-nav {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 9999;
    transform: translatey(-50%);
}
.header-actions.header-actions--right {
    position: relative;
    top: 50px;
}
        .header-title-nav-wrapper {max-width: 40%;}
.header-display-desktop {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
    .header-actions.header-actions--right, .header-actions.header-actions--right div {
    display: flex !important;
}}

image.png.288c831498a022c0969c8e32342701bf.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.