How to force mobile menu to remain on desktop site - v. 7.1

15 hours ago, Sotiris said:

I've gotten mine to work by changing the header layout to this one below and using the code I had pasted above.

Maybe this will help anyone whose logo is off-center.

 

Ohhh this made it  worse for me unfortunately!

18 hours ago, tuanphan said:

Logo looks fine here. Can youexxplain clearly?

Hi! I find it most clear that it's off center when I  open the menu  - see here: https://share.getcloudapp.com/KouZBdYD

@tuanphan Have you figured out how to get the cart icon to show on desktop? 

http://adaptology.squarespace.com/?password=pearler

Thanks!

On 8/5/2020 at 8:47 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* burger 3 lines */
.burger-box .patty {
    transform: translatey(0) !important;
    height: 2px;
}

 

This was just what I was looking for, thank you! 
 

Does anyone know how I could add an uppercase MENU label above the hamburger?!

Cheers,

18 hours ago, Callan said:

This was just what I was looking for, thank you! 
 

Does anyone know how I could add an uppercase MENU label above the hamburger?!

Cheers,

If you share link to your site, we can check easier

On 2/24/2020 at 9:23 AM, tuanphan said:

 

Thank you. I just tweaked your code to work on my site, 7.1

Here is code

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Hi @tuanphan!

Thank you so much for this code. I was able to successfully use it and apply it on my website. However, I noticed that the transition isn't applied to it. Only when the screen hits the mobile breakpoint. Is there a way to add the transition to your code?

Thanks!

On 11/4/2021 at 9:55 PM, sambatista said:

Hi @tuanphan!

Thank you so much for this code. I was able to successfully use it and apply it on my website. However, I noticed that the transition isn't applied to it. Only when the screen hits the mobile breakpoint. Is there a way to add the transition to your code?

Thanks!

However, I noticed that the transition isn't applied to it

Can you explain in more clearly this?

Is there a fix for altering the type line spacing and type size within the desktop menu, whilst keeping the logos where they are?

On 11/6/2021 at 10:35 PM, tuanphan said:

However, I noticed that the transition isn't applied to it

Can you explain in more clearly this?

Oops, sorry @tuanphan! I'm talking about the fade in of the menu. It happens when you're on mobile, it doesn't work if you apply this "custom breakpoint" for tablets. Is there a way to have it there as well?

On 11/11/2021 at 5:44 PM, Potter said:

Is there a fix for altering the type line spacing and type size within the desktop menu, whilst keeping the logos where they are?

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
div.container.header-menu-nav-item a {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}
}

Perfect! Thank you!

Hi I tried the codes in this thread but it didn't work for my site if anyone can help me? 

Site is: https://www.polyesterzine.com/

Feel like I've tried everything at this point

On 1/14/2022 at 8:42 PM, PolyesterZine said:

Hi I tried the codes in this thread but it didn't work for my site if anyone can help me? 

Site is: https://www.polyesterzine.com/

Feel like I've tried everything at this point

Add to Design > Custom CSS

/* Force mobile menu on desktop */
@media screen and (min-width:901px) {
header.Header.Header--top {
    display: none !important;
}
.Mobile.loaded {
    display: block !important;
}
}

Thank you so much!!

On 2/24/2020 at 7:23 AM, tuanphan said:

 

Thank you. I just tweaked your code to work on my site, 7.1

Here is code

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

 

Thanks Tuanphan!!! As usual you've got pretty much exactly what I needed and have been a life-saver. Thank you, thank you, thank you!

I had changed Call to Action button to a search block (found that trick elsewhere) and on mid-width displays the nav-menu was overlapping the search button.  Using your code I was able to increase the width at which the hamburger menu displayed, thus preventing overlap.

I had to make one change in order to have your code work in my situation. I changed "min-width" to "max-width". With that one change and no other changes it worked perfectly (other than experimenting until I found the width I needed it set to).

On 4/26/2022 at 3:13 AM, wallacewebdesign said:

Thanks Tuanphan!!! As usual you've got pretty much exactly what I needed and have been a life-saver. Thank you, thank you, thank you!

I had changed Call to Action button to a search block (found that trick elsewhere) and on mid-width displays the nav-menu was overlapping the search button.  Using your code I was able to increase the width at which the hamburger menu displayed, thus preventing overlap.

I had to make one change in order to have your code work in my situation. I changed "min-width" to "max-width". With that one change and no other changes it worked perfectly (other than experimenting until I found the width I needed it set to).

Okay. If you have any other questions, just reply here.

On 2/8/2021 at 8:26 PM, Guest said:

Not sure if anyone still checks this, but I tried the following code on my site and it has caused the cart link to disappear, as well as adding extra spacing between the nav links when I open the menu. 

Also, the burger icon looks a bit odd.

Here is my code so far:

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
  /* hide navigation */
    .header-nav {
    display: none;
}
  /* Hide header button */
	.header-actions {
    display: none;
}
	/* show burger */
	.header-burger {
  	display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

And here is the missing cart icon & extra space between nav links.

Hi, 

I have the exact same problem with my cart icon. I can't find a way to make it appear again.
Did you or anyone else find a solution for this?

Thanks so much!!

Dani

On 8/2/2022 at 7:30 PM, Dsimons said:

Hi, 

I have the exact same problem with my cart icon. I can't find a way to make it appear again.
Did you or anyone else find a solution for this?

Thanks so much!!

Dani

Try remove this code

/* Hide header button */
	.header-actions {
    display: none;
}

If it doesn't work, please share link to your site. We can check easier

2 hours ago, tuanphan said:

Try remove this code

/* Hide header button */
	.header-actions {
    display: none;
}

If it doesn't work, please share link to your site. We can check easier

This worked like a charm!! Thank you so much.

Thanks so much for posting this, it's been super helpful! I'm trying to go one step further and rotate the mobile menu bar on desktop so it shows vertically, so I get something like this: https://www.helengreendesign.com

I've got the mobile menu forced on desktop (thanks tuanphan!) but wondered if there's a way of getting that vertical bar on desktop with horizontal menu slide out please? My site is https://houseofvictoire.com

21 hours ago, torsgrantham said:

Thanks so much for posting this, it's been super helpful! I'm trying to go one step further and rotate the mobile menu bar on desktop so it shows vertically, so I get something like this: https://www.helengreendesign.com

I've got the mobile menu forced on desktop (thanks tuanphan!) but wondered if there's a way of getting that vertical bar on desktop with horizontal menu slide out please? My site is https://houseofvictoire.com

Add to Design > Custom CSS

.header-menu-nav-folder[data-folder="root"] {
    overflow: hidden;
}

Thanks tuanphan. I've added that in to my custom css but nothing's happening?

Edited to add, scratch that, I've figured out how to get it all to work! Well, except for the underline on the mobile menu active link, is there a way to remove that please?

On 2/12/2023 at 2:49 PM, torsgrantham said:

Thanks tuanphan. I've added that in to my custom css but nothing's happening?

Edited to add, scratch that, I've figured out how to get it all to work! Well, except for the underline on the mobile menu active link, is there a way to remove that please?

Which underline are you referring to?

I managed to get the burger menu on desktop with the code you all shared, great. But i was wondering is it possible to have the burger menu ALWAYS VISIBLE in the fixed position and on scroll back visualize only the color bar underneath plus the centered logo?

www.waldkinder-anzbach.at

On 5/22/2023 at 7:18 PM, Cristina_Rosebud said:

I managed to get the burger menu on desktop with the code you all shared, great. But i was wondering is it possible to have the burger menu ALWAYS VISIBLE in the fixed position and on scroll back visualize only the color bar underneath plus the centered logo?

 

www.waldkinder-anzbach.at

 

 

Move this?