Menu Mobile Layout and glitch - Publisher Theme

[jensberly]

Hello,

I’m trying to figure out how to customize the mobile menu of my page. I’m having trouble trying to position the menu items in the middle of the screen, changing the heading style (would like to switch to a different heading style, in this case h3), the color, and positioning the X icon further right. I also have a glitch with the hamburger menu icon: every time I open the menu drawer and close it, the menu icon slides to the right and goes back to its place.

Here’s a screenshot of the planned design:

And when you hover over a menu item, it should turn red:

And here’s a screenshot of how it looks now :

I would like no arrow at all when tapping on “shop” as well.

Regarding the glitch, here’s a screenshot of the moment where the hamburger menu icon is on the right:

Thanks for reading, I hope it’s not too confusing!

the site url: litichevskaya.myshopify.com pw: I’ll send to you via dm!

[NomtechSolution]

Add the following CSS to vertically align the menu items in the middle of the screen:

.mobile-menu .site-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

Update the CSS to change the heading style to h3. For example:

.mobile-menu .site-nav__heading {
  font-size: 20px;
  font-weight: bold;
  /* Add any other desired styles */
}

Modify the CSS to change the color to your desired value. For example:

.mobile-menu .site-nav__item a {
  color: #ff0000; /* Replace with your desired color */
}
.mobile-menu .site-nav__heading {
  color: #00ff00; /* Replace with your desired color */
}

[jensberly]

Sorry, I’m kind of new to working with code. Where do I paste the code? In base.css?

And what do I have to write to change the heading style?