Mobile Header + Navigation to be the same on desktop

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. 

Hi,

What is site url? We can check easier

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

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;
}

Great, thank you.

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.

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.

This has been extended now.

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?

Thank you! Yes managed to figure most of it out.

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?

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;
}

I am interested in doing this to a site I have. 
Can you help me with the code to change the desktop main navigation to use the same 'hamburger' menu that is displayed on mobile?

https://gardenia-cranberry-89sj.squarespace.com/

Thank you 🙂

On 8/1/2024 at 9:42 AM, 48thmediaco said:

I am interested in doing this to a site I have. 
Can you help me with the code to change the desktop main navigation to use the same 'hamburger' menu that is displayed on mobile?

https://gardenia-cranberry-89sj.squarespace.com/

Thank you 🙂

Use this code to Website Tools > Custom CSS

@media screen and (min-width:768px) {
    .header-burger {
    display: flex !important
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav,.header-actions {
    visibility: hidden !important
}
     .header-menu {
        left:unset;
        width: 25%
    }
}

Thank you so much @tuanphan

I am curious if there is a way for this menu to mask over the whole screen regardless of device screen size, in a responsive way?

Meghan

On 8/13/2024 at 10:45 PM, 48thmediaco said:

Thank you so much @tuanphan

I am curious if there is a way for this menu to mask over the whole screen regardless of device screen size, in a responsive way?

 

Meghan

Change 25% to 100%

Thank you so much!

This has been very helpful!
I put the code for the Hamburger Menu, but the text is quite large, is there a way now to reduce the font size of the menu items and possibly change the font?

Thanks!

On 10/18/2024 at 9:11 PM, KDA said:

This has been very helpful!
I put the code for the Hamburger Menu, but the text is quite large, is there a way now to reduce the font size of the menu items and possibly change the font?

Thanks!

You can use this to Website Tools > Custom CSS

@media screen and (min-width:768px) {
	div.header-menu-nav-item * {
		font-size: 18px !important;
		font-family: monospace;
}
}

Thank you! Is there a way to change the font size and style in the mobile version?

On 10/22/2024 at 10:17 AM, KDA said:

Thank you! Is there a way to change the font size and style in the mobile version?

Use this code

@media screen and (max-width:767px) {
	div.header-menu-nav-item * {
		font-size: 12px !important;
		font-family: monospace;
}
}