How can I lower the navigation menu on mobile view?

Store Design
1

Hey all, I posted this recently but couldn’t find a proper solution so I am going to try again.

header2.png
header2.png450×196 8.85 KB

header3.png
header3.png450×196 8.72 KB

So essentially, I would like to move my navigation bar to be placed below my logo. I inserted two images above, one is how it looks currently and the second is the look I am trying to achieve.

Does anyone know how this would be possible in code?

www.deranged-shop.com - minimal theme

2

Hi @donniederanged
The url is incorrect, please check and update your store url, then I can guide you make that

3

www.deranged-shop.com

4

Hi @donniederanged
You can try follow this path:
Themes => edit code => asset => theme.scss.liquid
and add this code to bottom of the file theme.scss.liquid

@media(max-width: 767px){
#shopify-section-header {
display: flex;
flex-direction: column-reverse;
margin-bottom: 0 !important;
}
.site-header {
padding: 0!Important;
}
}
5

That didn’t update anything

6

@donniederanged Have you added the code?
I didn’t see it.

7

Yes I did, check

8

Hi @donniederanged ,

So try to add this code befoer “” tag in Store Online > Themes > Actions > Edite Code > theme.liquid file

@media(max-width: 767px){
#shopify-section-header {
display: flex;
flex-direction: column-reverse;
margin-bottom: 0 !important;
}
.site-header {
padding: 0!Important;
}
}