[Resolved] Problem with navigation search item on desktop

[Klaus]

Hi there,

I’m about to brush up my GP site on a staging server.
What I want to accomplish is to have navigation search on mobile only and my main menu items centered on desktop. This is what I did:

1. I activated navigation search via customizer
2. I disabled navigation search for desktops using

@media (min-width: 769px) {
      .search-item {
        display:none;
    }
    }

3. This works fine on desktop as long as the menu items in the main navigation menu are left-aligned. The navigation search item on desktop reappears as soon as the menu items are centered or right-aligned.

What did I do wrong?
Any help appreciated.

Klaus

[Leo]

Hi there,

Hmm the CSS should work regardless what the navigation location setting is.

Your site is currently locked so I can’t see the issue.

Any chance you can unlock it or send me the password through Account Issue?
https://generatepress.com/contact/

Please reference the topic URL.

[Leo]

Oops just saw your e-mail with password info. Please mention that next time 🙂

Can you set the navigation location to center so I can see the problem?

[Klaus]

Hi Leo,

I just centered the navigation menu and the search item reappeared.
I also sent you admin access if you want to play around.

[Leo]

Was just getting overwritten.

Try this CSS instead:

@media (min-width: 769px) {
    .nav-aligned-center.nav-above-header .main-navigation .menu>li.search-item {
        display: none;
    }
}

[Klaus]

Hi Leo,

Thanks for the css snippet.
It works now with centered navigation menu. But the search item still reappears with menu items left- or right-aligned. But, as you stated: ‘the CSS should work regardless what the navigation location setting is.’, so isn’t there still something going wrong?
But for now I know that I will have to change css when repositioning the nav menu through customizer.

Regards,

Klaus

[Leo]

When the navigation is set to center, your original CSS is overwritten so technically it’s working.

If you just do this it should work regardless where the navigation is:

@media (min-width: 769px) {
    .search-item {
        display:none !important;
    }
}

I just like to avoid using !important as much as I can 🙂

[Klaus]

Hi Leo,

thanks again for your explanation. I had thought that ‘Simple CSS’ directives were always last in the cascade and so wouldn’t get overruled.
I totally agree that the !important property should be used as sparingly as possible. So I will stick to your first code suggestion and change css when necessary. It’s easily done and I’m not going to reposition the navigation menu on a daily basis.:-)
This thread can be marked as ‘RESOLVED’.

Regards,

Klaus

[Leo]

Generally it will overwrite but sometimes the line above is more specific like in this case.

If you really want to understand it, use browser inspect to see the code when you add them.

No problem!

[Klaus]

Leo,

thanks for your advice, your help and your patience.
I appreciate it.

Klaus

[Leo]

No problem at all 🙂

[Author]

Posts