Desktop header to match the mobile header

Store Design
1

Hi I am using flow theme and would like to have the menu in the header on desktop the same as on mobile version. With that I mean the three horizontal stripes. Looks way cleaner to me.

www.mardinwatches.com

2 Likes
2

@Proqit

i have checked on mobile home page its perfect can you please show me if any issue

3

Hi first all sorry for the late response.

The header on the mobile version has the three stripes to open the dropdown menu. I would like to have this on the desktop version too.

Excuse me if I was unclear with my question.

1 Like
4

@Proqit

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
.site-header .site-header__wrapper {display: none;}
.mobile-nav-bar-wrapper.large--hide.medium-down--show {
    display: inline-block !important;
}
.mobile-nav-bar-wrapper.large--hide.medium-down--show .large--hide.medium-down--show {
    display: inline-block !important;
}
5

Hi thank you very much for the input. www.mardinwatches.com. The only problem now is that the header on desktop is smaller now. Do you have a solution for that?

1 Like
6

@Proqit

yes please share issue image so i will check also now header smaller

7

header desktop.png
header desktop.png2535×1286 480 KB

1 Like
8

@Proqit

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
.mobile-nav-bar-wrapper.large--hide.medium-down--show {width: 100%;}