Jump to content

Mobile Header + Navigation to be the same on desktop

Recommended Posts

Hi, 

 

I would like my desktop header to be identical to the mobile header - so what I am trying to achieve on desktop site is a hamburger menu, aligned to the right, with the cart not disappearing. While the logo is aligned to the left. 

 

I have tried lots of different codes, but they all make the cart icon and social links disappear, how can I achieve keeping all navigation links, cart and social icons while using the hamburger menu on desktop? 

 

Thanks. 

Link to comment
  • Replies 11
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 months later...
On 5/7/2024 at 10:39 PM, Soka said:

Hi,

I have made the desktop menu the same as the mobile, however, the social icons don't line up with the menu text?

Is there also a way I can move everything over to the right, so it is all more centred on the desktop only.

https://wrasse-pigeon-s84s.squarespace.com/
pw: sokastudio_jg

You can use this code to Website > Website Tools > Custom CSS

.header-menu-actions.social-accounts {
    margin-left: 9vw !important;
}
.header-menu-actions.social-accounts>div {
    margin-left: 0 !important;
    margin-right: 1.2vw !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!)

Link to comment
Posted (edited)

I would also like to remove the underlines on the current page in the menu?

Can I move the menu text over to the right more in the desktop drop-down and more to the left on the mobile, so it lines up with the contents on the pages?

Also, how do I change the logo at the top of the Menu and News/Blog Overview and Contents to a white version and change the text to white for the News/Blog footer.

Edited by Soka
Link to comment
On 5/13/2024 at 5:02 PM, Soka said:

I would also like to remove the underlines on the current page in the menu?

Can I move the menu text over to the right more in the desktop drop-down and more to the left on the mobile, so it lines up with the contents on the pages?

Also, how do I change the logo at the top of the Menu and News/Blog Overview and Contents to a white version and change the text to white for the News/Blog footer.

The site is expired, you can access this link to extend it, then I can check again easier.

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!)

Link to comment
On 5/13/2024 at 5:02 PM, Soka said:

I would also like to remove the underlines on the current page in the menu?

Can I move the menu text over to the right more in the desktop drop-down and more to the left on the mobile, so it lines up with the contents on the pages?

Also, how do I change the logo at the top of the Menu and News/Blog Overview and Contents to a white version and change the text to white for the News/Blog footer.

#1. Use this CSS code

.header-menu-nav-item-content {
    background-image: none !important;
}

#2. #3. I see you figured it out?

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!)

Link to comment
On 5/21/2024 at 11:22 PM, Soka said:

I have added some code to have the white logo on the menu drop-down, however, it is only working on the blog pages, any ideas why?

You can use this code to top of Custom CSS box

body.header--menu-open header#header img {
    filter: brightness(0) invert(1) !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!)

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.