Re: Menu not showing on mobile version of Sense Theme

Solved

Menu not showing on mobile version of Sense Theme

enriquegarcia
Tourist
24 0 2

Hi, the menu of my store only appears in the Desktop version. When I switch to the mobile version, the menu hides. Could someone please help me? I'm attaching photos.

 

Also if someone can tell how can I put  my logo to the left and put the menu to the right in the same line as the logo, it would be of great help (only necessary in the Desktop version).

 

enriquegarcia_0-1732746298002.pngenriquegarcia_1-1732746429161.png

 

Accepted Solution (1)
TikitaTech
Shopify Partner
70 17 17

This is an accepted solution.

Hi @enriquegarcia,

 

Currently, the css on header is squishing the logo off to the side

 

swappy-20241129_073807.png

 

Changing the css to this:

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Will give you this:

swappy-20241129_074216.png

 

Then, to keep the menu items centered (currently left-aligned on smaller screen sizes), edit your (index) file:

(around line 519)

From:

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

 To:

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content:center
}

 

Hope this helps!

Daeda Wishlist - just a simple wishlist, no fluff
Co-founded Daeda Technologies Ltd to make tech simple

View solution in original post

Replies 7 (7)

TikitaTech
Shopify Partner
70 17 17

Hi @enriquegarcia!

 

I’d need to take a closer look at your site to help solve this. Could you share your store's password?

 

To change the position of your logo to the left and your menu to the right on desktop, select Middle Left from the Desktop logo position drop down.

From:

swappy-20241128_060813.png

 

To:

swappy-20241128_060705.png

 

Hope this helps!

Daeda Wishlist - just a simple wishlist, no fluff
Co-founded Daeda Technologies Ltd to make tech simple
enriquegarcia
Tourist
24 0 2

Hi! The site is imgarsa.com and the password is teti

TikitaTech
Shopify Partner
70 17 17

In your css.base file, the navigation is set to display:none; for mobile screen size.

 

swappy-20241128_065908.png

 

Setting display to block will make it visible.

 

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: block;
}

 

Let me know if you need any more details!

Daeda Wishlist - just a simple wishlist, no fluff
Co-founded Daeda Technologies Ltd to make tech simple
enriquegarcia
Tourist
24 0 2

It works! But the logo dissappears when I switch to mobile, could you please tell me how to make the logo visible in Mobile Version?

 

enriquegarcia_0-1732808154717.png

 

enriquegarcia
Tourist
24 0 2

Could you please solve my other doubt.

TikitaTech
Shopify Partner
70 17 17

This is an accepted solution.

Hi @enriquegarcia,

 

Currently, the css on header is squishing the logo off to the side

 

swappy-20241129_073807.png

 

Changing the css to this:

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Will give you this:

swappy-20241129_074216.png

 

Then, to keep the menu items centered (currently left-aligned on smaller screen sizes), edit your (index) file:

(around line 519)

From:

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
}

 To:

.list-menu--inline {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content:center
}

 

Hope this helps!

Daeda Wishlist - just a simple wishlist, no fluff
Co-founded Daeda Technologies Ltd to make tech simple
enriquegarcia
Tourist
24 0 2

Thank you very much!