Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Problem with navigation search item on desktop

Home Forums Support [Resolved] Problem with navigation search item on desktop

Home Forums Support Problem with navigation search item on desktop

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #524920
    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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #525088
    Leo
    Staff
    Customer Support

    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.

    #525090
    Leo
    Staff
    Customer Support

    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?

    #525172
    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.

    #525362
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #525527
    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

    #525840
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #526268
    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

    #526503
    Leo
    Staff
    Customer Support

    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!

    #526646
    Klaus

    Leo,

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

    Klaus

    #527041
    Leo
    Staff
    Customer Support

    No problem at all πŸ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.