Archived topic

Menu with centered logo -- problems on mobile

5 replies · Started by Kristjan on August 23, 2019

Viewing posts 1–6 of 6

August 23, 2019 at 9:17 am #991712

Hello,

I am having some trouble with the header / navigation menu on the mobile version of a site I am working on: Icelandic Down

I did follow these instructions to make the logo centered in the menu: https://docs.generatepress.com/article/centering-logo-navigation/

There are two problems:

1. In the header / navigation bar on mobile, the search icon is displayed right below or on top of the logo.

2. In the menu bar, there is a big cap in place where I put the menu item separator.

Any idea how to fix these?

August 23, 2019 at 11:44 am #991817

Hi there,

Let me know :)

August 23, 2019 at 11:59 am #991822

The caching plugin is disabled on the staging site but it has the same issue: https://staging-icelandicdown.kinsta.cloud/

August 23, 2019 at 12:15 pm #991833

The caching plugin isn't the issue - having it disabled allows us to see the source of the code better which is why we ask for it.

Try adding this CSS:

#mobile-header .mobile-bar-items.wc-mobile-cart-items {
    margin-left: 0;
}

Then modify this existing CSS:

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

To this:

.slideout-navigation .main-nav li.menu-item-separator,
.main-navigation.toggled .main-nav li.menu-item-separator {
	display: none !important;
}

Let me know :)

August 24, 2019 at 5:55 am #992207

Thank you very much, this worked.

August 24, 2019 at 11:03 am #992462

No problem :)

This archived topic is closed to new replies.