How do I change the menu location on a mobile in Streamline theme?

[JessTBL]

I am using STREAMLINE theme and the top menu bar is missing when you go to my site on a mobile phone. It is appearing down the bottom and blocks parts of my web page. I would like to keep it the same as the desktop view (logo on left, menu on right).

My site is https://thebeachlife.com.au/

Any advice would be appreciated, thank you.

[namphan]

Hi @JessTBL ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media only screen and (max-width: 768px) {
.header-item.header-item--icons.small--hide {
    display: flex !important;
    flex: auto;
}
.header-item.header-item--icons.small--hide .site-nav__link--icon {
    display: none;
}
.header-item.header-item--icons.small--hide .site-nav__link--icon.js-toggle-slide-nav {
    display: block !important;
}
.site-nav__thumb-menu {
    display: none !important;
}
}

[suyash1]

@JessTBL - it can be made like this, but it looks weird when menu opens

it can be made like this and

[JessTBL]

Hi, I am wanting the same menu that is on the desktop to be on the mobile - is that possible?

[suyash1]

@JessTBL it will be like this, but it works with few menu options only, might face issues if you add more menu options

[namphan]

Hi @JessTBL ,

You can follow the instructions below, it will display fine:

[JessTBL]

Hi, no unfortunately it is not displaying correctly. The hamburger appears on the top right (like you have shown) but when you click on it the menu appears at the bottom of the page (screenshot below). Is there a way to change this so it appears under the hamburger icon in white?

[namphan]

Hi @JessTBL ,

Please add code:

@media only screen and (max-width: 768px) {
.slide-nav__overflow--thumb.js-menu--is-open {
    border-radius: var(--buttonRadius) !important;
    bottom: auto;
    top: 120px;
}
.slide-nav {
    padding-bottom: 15px;
}
}

[LizHoang]

Hi @JessTBL

You can change it on your store by following this instruction:

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (max-width: 768px){
.header-item.header-item--navigation.text-right.small--hide {
    display: none;
}
.h1.site-header__logo a.site-header__logo-link > image-element:nth-child(1) {
    display: none;
}
.site-nav__thumb-menu {
    display: none;
}
.header-item.header-item--icons.small--hide {
    display: flex !important;
    align-items: center;
}
}

here is the result:

[JessTBL]

Hi @suyash1 are you able to send me this code and where I insert it so I can give it a go please. I have changed my menu slightly so I think this will be my best solution. Thanks

[suyash1]

@JessTBL - please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

@media screen and (max-width:749px){
.header-item--navigation, .site-navigation{display: block !important;}
}

[JessTBL]

Hi @suyash1 , thank you for that but it is still displaying the menu option at the bottom of the screen. How do I remove this from the mobile view and just keep the top menu?

[suyash1]

@JessTBL - add this as well

.site-nav__thumb-menu {display: none !important;}