Hi, Great video! How to move burger menu on the left side, logo to medium and button on the right? I've chosen header layout correctly, but it doesn't work.
@@bycrawford This worked to bring back the cart, but the logo is no longer centered. And the cart seems large for desktop. Can you help with this? Thank you!
Great Sam! Can you explain how not to have the red background? Adjust so that we can choose a different colour and change opacity so that the desktop image is fully visible when menu is open? Many thanks!
Thank you Ilse! So what this code does is brings the mobile menu to the desktop, meaning to change the colour, you just need to go into the site styles of your site and change the colour. I have a video on this here to make it easier: ua-cam.com/video/8URc-uELYUk/v-deo.html Then if you wanted to turn the opacity down on the background, add this to your CSS: .header--menu-open .header-menu .header-menu-bg { background-color: rgba(0,0,0,0); } You can change the final '0' to anything between 0-1 (eg. 0.5) to make the menu slightly more opaque. Hope this helps!
@@bycrawford thanks so much! so the mobile view background color needs to be changed, meaning the mobile desktop view inherits mobile col our settings?
You're welcome Kim! This requires a different setup, but can be achieved. Here's the tutorial: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
Awesome tutorial! Quick question, how would you add the hamburger menu to the left side of the header while also keeping the CTA button on the right side?
Thanks for the explanation, much appreciated! You've help several others with getting the link to the cart to still show up along side the hamburger menu. When I add the code you suggest in these cases, it sends the menu to the left next to the logo, instead of aligned to the right along with the cart. Even after fussing with the code and Squarespace settings, I can't seem to get past this. Any suggestions?
Hey Heather! What you probably need in this case is a slightly different solution which should make things easier. You can see it here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
Hey Andre, same solution as above for Heather: What you probably need in this case is a slightly different solution which should make things easier. You can see it here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
Great quick video! Quick question... Is it possible to customize the hamburger menu? Ie. change stroke, rotation of the lines, add a third line, color, etc?
Hey Cody! You can actually change this natively. When we use this code, it pulls in the styling of the mobile menu. So you just need to click on your header, navigate to the mobile icon and then style the burger there. Let me know if this is clear enough?
Awesome video, just what I was looking for. Thank you! One thing I am struggling with is changing the size of the font of my actual menu - it is far too big. I have tried the site styles but it won't reduce the size at all. If you have any tips, that would amazing! Great content, thank you!
Huge thank you! My website looks stunning now. Your channel deserves so much credit. Your content is invaluable. Will certainly consider utilising your services or recommending them in the future. Thanks X @@bycrawford
Hey! You can just set that natively by going into the mobile menu editor and center aligning in there
8 місяців тому
Thank you very much for the video. Its very helpfull. I wanna ask a question. I create the burger menü but when i click on it, the menü layer that pups up covers all the intro page. Can we make it smaller?
Glad it helped! Yes there is actually a plugin that does this really well. Here's the link: schwartz-edmisten.com/plugins/p/hamburger-menu-on-desktop-in-71
Hey! If yours is showing on the left it'll be because that's your mobile menu alignment. If you change your mobile burger menu on the mobile menu editor, this should reflect on the desktop too
THANK YOU!!!! My stupid site is actually displaying the WORD "menu" instead of displaying the burger icon which screams amateur hour. I have no idea how to change this.
Hey! You're very welcome. If you send me the link to your site I'll take a quick look for you. If UA-cam won't let you post the link just drop me an email at sam@bycrawford.com
How would I keep the navigations as is (no hamburger menu) but change WHEN it morphs into a hamburger menu? Meaning, as it stands, if rescale my browser my navigation items will stack and THEN morph into a hamburger menu. I want to avoid the stacking and go straight into a hamburger menu. Lol hopefully that made sense.
Makes perfect sense Jacob! So you add a media query. In this instance it would look like this: @media screen and (max-width: 940px) { .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } } And then just adjust your px value in the 'max-width' bit to fit what you need.
Hey Sam! Do you know if it's possible to basically do what you're showing @2:01 but in a line of text? Lets say the text you have there "Code Samples" where if you click it, it would have a drop down menu?
How do I do this for Squarespace 7 using Bedford template. Other devs suggest searching mobile break in the site design but I get nothing found error. Thanks Sam.
Hey Robin, yeah I don't think the mobile breakpoint method works with Bedford - I just checked. There's not too much info about this online, but I did find this post that may help: forum.squarespace.com/topic/214632-bedford-theme-adding-hamburger-menu-to-desktop/
Hey Sam, any tips on how to reduce spacing between between menu items, I've got a folder in the nav and when clicking on that item the spacing increases quite aggressively.
Hey Tim! Try this: @media screen and (min-width: 641px) { .header-menu .header-menu-nav .header-menu-nav-item a { margin-top: -10px } } Then adjust that margin top value up or down to get the spacing just right
Hey Sam! Great vid! I've since used to the hamburger code on my website and I love the look of it. However, the cart icon seems to disappear on a desktop for me (but remains when viewed on a mobile). Do you have a solution to bring this back on desktop? 🙂
@@bycrawford This works great, Sam! Thank you! I have one question, though. When applied, it shifts the logo (in desktop view) to the left, as well as the cart, by around 20%. Is there a way to ensure they stay in their correct positions? UPDATE: My friend, I did this and it worked. Not sure if this is the correct way though. .header-nav { display: none; } .header-actions { margin-right: 20px; } .header-burger { display: flex; margin-right: 115px; } .header--menu-open .header-menu { visibility: visible; opacity: 1; }
Thank you! Yes you can do that using this: www.primitusconsultancy.co.uk/blog/replacing-the-mobile-hamburger-menu-icon-with-your-own-image-on-squarespace-71
Thanks for the response!@@bycrawford The link you shared did replace the hamburger menu to an icon of my choice! However, I do have two additional questions. Is it possible to make the icon "flex" into an "x" when the menu is opened or allow for the icon to have a different shade of color when the menu is open? Also, would it be possible to adjust the size of the text in the menu and align the content in the menu towards the left side of the screen when the menu is open?
@@chaselo7976 no problem! I have a guide on changing the text size here: bycrawford.com/blog/how-to-change-mobile-menu-font-size-squarespace To left align, you can do this in the nav menu settings when you're editing a page. For the flexing of the icon, I don't think you can do that in terms of animating it. But you can change the icon when the menu is open. Check out this guide: forum.squarespace.com/topic/256249-how-can-to-change-the-burger-menu-icon-to-a-close-icon-when-the-menu-is-open-on-mobile-squarespace/#comment-677130
@@bycrawford Thanks again for the help! I was able to successfully change the text size and align it towards the left of the menu. I was unfortunately unable to change the icon of the opened menu with the guide you provided. Do you have any ideas on how to fix this or perhaps a different solution to tackle this situation? I also realized that a scroll bar would appear when the menu is open. Would it be possible to hide that? Again, appreciate the help and responses!
Hey Sam, thanks for this video. Question. I noticed that if you have login and social links elements on, then those items are also displayed outside the hamburger menu. Do you have a specific coding for keeping those items in burger and just having the button outside the burger menu?
Hey Sam, Just wondering if theres a way to have the desktop hamburger menu not take up the whole page? I ideally would like it to only be 1/3 of the full width. Thanks!
Yes of course! @@Verien7 Try this: @media screen and (min-width: 641px) { .header-menu .header-menu-nav .header-menu-nav-item a { margin-top: -10px } } And adjust the px value to suit your needs.
Any way to fix the back and forth jumping of the scroll bar width when the navigation menu is opened and closed? The scroll bar disappears upon opening which pushes the entire page over the width of the scroll bar.
On Squarespace 7.0 the hamburger menu would appear whenever you resized the window narrower, or whenever the zoom was large and to avoid the navigation items to stack on top of each other. On 7.1 this is also present, but the navigation items stack up on top of each other and they won't turn into a hamburger menu unless you really made your window very small. Is there a way to adjust that conversion point with this code? Thanks!
You can wrap your code in a media query like this: @media screen and (max-width: 1000px) { .header-nav, .header-actions { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { visibility: visible; opacity: 1; } } And then just adjust the px value!
Hey Jonathan, Try this: .header-nav, .header-actions { display: none !important; } .header-burger { display: flex !important; } .header--menu-open .header-menu { visibility: visible !important; opacity: 1 !important; } If that doesn't work, email me at sam@bycrawford.com with a screenshot of your code and I will help you out.
@@bycrawford that did turn the button into the hamburger, however it then goes into a button menu to be pressed to bring me to the page i assigned the button to bring me to, idk
@@johnathanjenkins289 Hey Jonathan, it doesn't target the button so that shouldn't be happening! If you send me an email I can take a proper look for you.
Hey, thanks for this. It worked perfectly but my logo always gets moved a bit to the left (it is central). How do I make sure it doesn't move the logo?
Hey! I found a forum thread on this here: forum.squarespace.com/topic/172992-burger-navigation-menu-logo-not-centered/ This code should fix your issue: @media screen and (max-width: 3000px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } .header-title-nav-wrapper { flex: 1 0 100%; } }
Man, another perfect video. Every time I go searching for a Squarespace solution and you pop up, I know it's going to be good stuff.
Thanks so much Sam! Glad you find them useful
Thanks so much! Is there a way to increase the space between the button and the hamburger?
You're welcome Laura!
Try this:
header .sqs-button-element--primary {
margin-right: 20px !important;
}
@@bycrawford YOU ARE A SAINT
Hi Sam, great video as always. May I ask for some help? How can I remove the contact us button when the menu opens?
Thank you! If you click on your header > elements > button
You should be able to untoggle the button :)
LEGEND! Thank you so much brotha! Great content btw
Glad I could help Matt! Thanks for the kind words
Hi, Great video! How to move burger menu on the left side, logo to medium and button on the right? I've chosen header layout correctly, but it doesn't work.
Hey! Thanks so much. You can try this:
@media screen and (min-width:992px) {
.header--menu-open .header-menu {
bottom: unset;
height: 50%;
left: 20px;
right: 20px;
top: 20px;
}
.header-menu-nav-folder.header-menu-nav-folder--active {
overflow: hidden;
}
.header-menu-nav-folder-content a {
margin-top: 10px;
margin-bottom: 10px;
}
}
Great video! One question, Is there a way to have the burger menu as well as a cart button on the header? It deletes it when I input the code
Thank you!
Try deleting the code and adding this instead:
.header-nav {
display: none;
}
.header-actions {
margin-right: 20px;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
@@bycrawford wow, thank you so much for your help! your content is a massive help
@@bycrawford This worked to bring back the cart, but the logo is no longer centered. And the cart seems large for desktop. Can you help with this? Thank you!
Great tutorial. So happy I found you. Great info, and I love your audio -- can you share your mic you use? Thanks
Thank you Kim! I use a Blue Yeti mic and then run it through a software called Descript which allows you to apply 'studio sound' to the audio
Thank you, I appreciate it! @@bycrawford
Great Sam! Can you explain how not to have the red background? Adjust so that we can choose a different colour and change opacity so that the desktop image is fully visible when menu is open? Many thanks!
Thank you Ilse! So what this code does is brings the mobile menu to the desktop, meaning to change the colour, you just need to go into the site styles of your site and change the colour. I have a video on this here to make it easier: ua-cam.com/video/8URc-uELYUk/v-deo.html
Then if you wanted to turn the opacity down on the background, add this to your CSS:
.header--menu-open .header-menu .header-menu-bg {
background-color: rgba(0,0,0,0);
}
You can change the final '0' to anything between 0-1 (eg. 0.5) to make the menu slightly more opaque.
Hope this helps!
@@bycrawford thanks so much! so the mobile view background color needs to be changed, meaning the mobile desktop view inherits mobile col our settings?
@@YTillie2000 Exactly that!
@@bycrawford Fab! Thank you again :)
Hi Sam, thanks for this video! Is it possible to have different menu options on the pop-up hamburger menu than what is displayed on the hero menu?
You're welcome Kim! This requires a different setup, but can be achieved.
Here's the tutorial: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
Awesome tutorial! Quick question, how would you add the hamburger menu to the left side of the header while also keeping the CTA button on the right side?
Thanks Alex! This is a lot more code-heavy. But there is a solution which is actually a paid plugin from Ghost Plugins if you're familiar with them?
ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
This could also help!
Legend! Thank you
Thanks for the kind words!
Great video! Is there anyway to keep the social icons and lose everything else?
Thanks!
Try deleting the code and adding this instead:
.header-nav {
display: none;
}
.header-actions {
margin-right: 20px;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
Thanks for the explanation, much appreciated! You've help several others with getting the link to the cart to still show up along side the hamburger menu. When I add the code you suggest in these cases, it sends the menu to the left next to the logo, instead of aligned to the right along with the cart. Even after fussing with the code and Squarespace settings, I can't seem to get past this. Any suggestions?
same problem
Hey Heather! What you probably need in this case is a slightly different solution which should make things easier.
You can see it here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
Hey Andre, same solution as above for Heather:
What you probably need in this case is a slightly different solution which should make things easier.
You can see it here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
@@bycrawford Thanks so much, that worked! Couldn't find the solution anywhere, I really appreciate it!
This is great! How do i get my Hamburger to align right rather than be left aligned?
Thanks! It should already be right aligned like in the video
@@bycrawford mine is left aligning - really odd - is there a way I can change this please?
Thank youuuu!!!!
You're very welcome!
Perfect solution. Thank you!
You're welcome!
This is great! Can I somehow comment out the Home link in my menu?
Thanks! Yes if you send me your site URL I can write the code for you
Great quick video! Quick question... Is it possible to customize the hamburger menu? Ie. change stroke, rotation of the lines, add a third line, color, etc?
Thank you! It should be. What specifically would you like to do?
Hey! This worked for me, but is there a way to make the lines on the menu a little thicker?
Hey Cody! You can actually change this natively.
When we use this code, it pulls in the styling of the mobile menu.
So you just need to click on your header, navigate to the mobile icon and then style the burger there.
Let me know if this is clear enough?
Awesome video, just what I was looking for. Thank you! One thing I am struggling with is changing the size of the font of my actual menu - it is far too big. I have tried the site styles but it won't reduce the size at all. If you have any tips, that would amazing! Great content, thank you!
Glad it helped! I actually have a video on this too.
You can find it here: ua-cam.com/video/fu1ev_p9Pgk/v-deo.html
Huge thank you! My website looks stunning now. Your channel deserves so much credit. Your content is invaluable. Will certainly consider utilising your services or recommending them in the future. Thanks X @@bycrawford
Appreciate the kind words! Thanks a lot :D
Hey, this worked perfectly for me, however, I want to get the items on the menu to be centred on the screen, currently they're left aligned... Thanks!
Hey! You can just set that natively by going into the mobile menu editor and center aligning in there
Thank you very much for the video. Its very helpfull.
I wanna ask a question.
I create the burger menü but when i click on it, the menü layer that pups up covers all the intro page. Can we make it smaller?
Glad it helped! Yes there is actually a plugin that does this really well. Here's the link: schwartz-edmisten.com/plugins/p/hamburger-menu-on-desktop-in-71
@@bycrawford Thanks man. It very kind of you.
Thank you for this, I'm new to SS! Mines is showing up on the left, is there a way to have it on the right? Thanks
Hey! If yours is showing on the left it'll be because that's your mobile menu alignment. If you change your mobile burger menu on the mobile menu editor, this should reflect on the desktop too
THANK YOU!!!! My stupid site is actually displaying the WORD "menu" instead of displaying the burger icon which screams amateur hour. I have no idea how to change this.
Hey! You're very welcome. If you send me the link to your site I'll take a quick look for you.
If UA-cam won't let you post the link just drop me an email at sam@bycrawford.com
Thank you so much! You just saved me from having to purchase a plugin.
Glad I could help!
How would I keep the navigations as is (no hamburger menu) but change WHEN it morphs into a hamburger menu? Meaning, as it stands, if rescale my browser my navigation items will stack and THEN morph into a hamburger menu. I want to avoid the stacking and go straight into a hamburger menu. Lol hopefully that made sense.
Makes perfect sense Jacob! So you add a media query.
In this instance it would look like this:
@media screen and (max-width: 940px) {
.header-nav, .header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
}
And then just adjust your px value in the 'max-width' bit to fit what you need.
Worked beautifully! Thank you! @@bycrawford
@@jacobbrooks9414 you're welcome!
Hey Sam! Do you know if it's possible to basically do what you're showing @2:01 but in a line of text? Lets say the text you have there "Code Samples" where if you click it, it would have a drop down menu?
Hey! Yes I believe there is a tutorial about creating this sort of system here: ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/
How do I do this for Squarespace 7 using Bedford template. Other devs suggest searching mobile break in the site design but I get nothing found error. Thanks Sam.
Hey Robin, yeah I don't think the mobile breakpoint method works with Bedford - I just checked.
There's not too much info about this online, but I did find this post that may help:
forum.squarespace.com/topic/214632-bedford-theme-adding-hamburger-menu-to-desktop/
Hey Sam, any tips on how to reduce spacing between between menu items, I've got a folder in the nav and when clicking on that item the spacing increases quite aggressively.
Hey Tim!
Try this:
@media screen and (min-width: 641px) {
.header-menu .header-menu-nav .header-menu-nav-item a {
margin-top: -10px
}
}
Then adjust that margin top value up or down to get the spacing just right
Hey Sam! Great vid! I've since used to the hamburger code on my website and I love the look of it. However, the cart icon seems to disappear on a desktop for me (but remains when viewed on a mobile). Do you have a solution to bring this back on desktop? 🙂
Thanks Alanna!
Try deleting the code and adding this instead:
.header-nav {
display: none;
}
.header-actions {
margin-right: 20px;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
Does this work for you?
@@bycrawford This works great, Sam! Thank you! I have one question, though. When applied, it shifts the logo (in desktop view) to the left, as well as the cart, by around 20%. Is there a way to ensure they stay in their correct positions?
UPDATE: My friend, I did this and it worked. Not sure if this is the correct way though.
.header-nav {
display: none;
}
.header-actions {
margin-right: 20px;
}
.header-burger {
display: flex;
margin-right: 115px;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
@@scent1test Glad to hear that worked! I wouldn't worry about being 'correct' - if it works, it works!
Great video! Is it possible to change the icon of the hamburger menu to a different icon or image of my own choice?
Thank you! Yes you can do that using this:
www.primitusconsultancy.co.uk/blog/replacing-the-mobile-hamburger-menu-icon-with-your-own-image-on-squarespace-71
Thanks for the response!@@bycrawford The link you shared did replace the hamburger menu to an icon of my choice! However, I do have two additional questions. Is it possible to make the icon "flex" into an "x" when the menu is opened or allow for the icon to have a different shade of color when the menu is open? Also, would it be possible to adjust the size of the text in the menu and align the content in the menu towards the left side of the screen when the menu is open?
@@chaselo7976 no problem!
I have a guide on changing the text size here: bycrawford.com/blog/how-to-change-mobile-menu-font-size-squarespace
To left align, you can do this in the nav menu settings when you're editing a page.
For the flexing of the icon, I don't think you can do that in terms of animating it. But you can change the icon when the menu is open. Check out this guide: forum.squarespace.com/topic/256249-how-can-to-change-the-burger-menu-icon-to-a-close-icon-when-the-menu-is-open-on-mobile-squarespace/#comment-677130
@@bycrawford Thanks again for the help! I was able to successfully change the text size and align it towards the left of the menu. I was unfortunately unable to change the icon of the opened menu with the guide you provided. Do you have any ideas on how to fix this or perhaps a different solution to tackle this situation? I also realized that a scroll bar would appear when the menu is open. Would it be possible to hide that? Again, appreciate the help and responses!
Hey Sam, thanks for this video. Question. I noticed that if you have login and social links elements on, then those items are also displayed outside the hamburger menu. Do you have a specific coding for keeping those items in burger and just having the button outside the burger menu?
Hey! Apologies for the delayed response. Were you able to fix this or do you still need a solution?
Could still use some help. Would love to move only the button outside of the hamburger menu
@@simplyarmando No problem - does this work:
.header-nav {
display: none;
}
.header-actions {
margin-right: 20px;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
ps. obviously delete the previous code before adding this in
@@bycrawford No it doesn't work. Login and social links are still showing up outside the hamburger menu along with the button
Hey Sam, Just wondering if theres a way to have the desktop hamburger menu not take up the whole page? I ideally would like it to only be 1/3 of the full width. Thanks!
Hey Georgia!
This tutorial should help with that: ua-cam.com/video/yXDALJhM1rg/v-deo.html&ab_channel=S-EWebDesign
Hi thank you for this code. I have one question. My font and spacing is huge when the menu drops down. Do I sort this with code or fonts/style
Hey Furkz this would need some code!
@@bycrawford Hi, many thank for the reply. Could you point me in the right direction or is it something you can help with. Thanks
Yes of course! @@Verien7
Try this:
@media screen and (min-width: 641px) {
.header-menu .header-menu-nav .header-menu-nav-item a {
margin-top: -10px
}
}
And adjust the px value to suit your needs.
@@bycrawford Many Thanks, will give that a go.
Perfect Thanks SO much. @@bycrawford
Any way to fix the back and forth jumping of the scroll bar width when the navigation menu is opened and closed? The scroll bar disappears upon opening which pushes the entire page over the width of the scroll bar.
Not that I am aware of - sorry!
How can I make menub be on the left side of the page?
Hey! Try this: forum.squarespace.com/topic/220149-desktop-hamburger-menu-on-left-with-button-on-right/
On Squarespace 7.0 the hamburger menu would appear whenever you resized the window narrower, or whenever the zoom was large and to avoid the navigation items to stack on top of each other. On 7.1 this is also present, but the navigation items stack up on top of each other and they won't turn into a hamburger menu unless you really made your window very small. Is there a way to adjust that conversion point with this code? Thanks!
You can wrap your code in a media query like this:
@media screen and (max-width: 1000px) {
.header-nav, .header-actions {
display: none;
}
.header-burger {
display: flex;
}
.header--menu-open .header-menu {
visibility: visible;
opacity: 1;
}
}
And then just adjust the px value!
SUPER!!!!!!!!
Thanks!
Did'nt work for me. i am not a code guy but i am proficient in copy and paste.
Hey Jonathan,
Try this:
.header-nav, .header-actions {
display: none !important;
}
.header-burger {
display: flex !important;
}
.header--menu-open .header-menu {
visibility: visible !important;
opacity: 1 !important;
}
If that doesn't work, email me at sam@bycrawford.com with a screenshot of your code and I will help you out.
@@bycrawford that did turn the button into the hamburger, however it then goes into a button menu to be pressed to bring me to the page i assigned the button to bring me to, idk
@@johnathanjenkins289 Hey Jonathan, it doesn't target the button so that shouldn't be happening! If you send me an email I can take a proper look for you.
Hey, thanks for this. It worked perfectly but my logo always gets moved a bit to the left (it is central). How do I make sure it doesn't move the logo?
Hey! I found a forum thread on this here: forum.squarespace.com/topic/172992-burger-navigation-menu-logo-not-centered/
This code should fix your issue:
@media screen and (max-width: 3000px) {
/* Display burger icon at all widths and align right */
.header .header-burger {
display: flex;
order: 2 !important;
}
/* Make burger menu visible at all widths */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
/* Center logo in mobile device */
.header-title {
text-align: center !important;
}
/* Hide primary navigation menu */
.header .header-title-nav-wrapper .header-nav {
display: none;
}
.header-title-nav-wrapper {
flex: 1 0 100%;
}
}