[Resolved] Disable primary navigation and keep secondary navigation

[Kevin]

Hi,

How do I disable the primary navigation and keep the secondary navigation?

1. For this site (http://meine-ec-karte.de/) I’d like to have the same menu you have on https://generatepress.com/

2. How do I add the Logo on the left of the secondary menu?

3. CTA on the right after “Blog”
To add a CTA I’ve tried the following but hasn’t worked:

  
add_action( 'generate_inside_navigation','generate_add_navigation_button' );
function generate_add_navigation_button()
{ ?>
       <a class="nav-button" href="https://www.cardduo.eu/mainpage?ref=JCBnav.CD-FA&s_id=25952C56233929T">Bestellen</a>
<?php }

nav-button,
.nav-button:visited {
      float: right;
      background: #5eb846;
      color: #FFFFFF;
}

.nav-button:hover {
      background: #418031;
      color: #FFFFFF;
}

Thanks

[Kevin]

Just a follow up:

I used this CSS as described in the documentation here: https://docs.generatepress.com/article/navigation-logo/

.site-header {
    display: none;
}

That has solved issue #1 for Desktop. For mobile the header is still visible

[Leo]

Any reason why you would want to disable primary navigation and only use the secondary?
Looks like you only have menu currently so you can achieve the exact same thing by using the primary menu only.

2. I would recommend using primary navigation as the note above then you can use the navigation logo: https://docs.generatepress.com/article/navigation-logo/

3. This method would work better: https://docs.generatepress.com/article/adding-buttons-navigation/

[Kevin]

Hi Leo,

I was actually trying to just achieve the same menu bar you guys have > https://generatepress.com/ including my logo on the left and a cta on the right.

2. https://prnt.sc/ghzrn5 https://prnt.sc/ghzmdw … still not getting the logo image

3. You suggestion worked. Just can’t get the hover color right.

@media (min-width:769px) {
    .secondary-navigation .main-nav ul li.nav-button a {
        background-color: #418031;
        border: 2px solid #000000;
        color: #FFFFFF;
    }
}
.secondary-navigation .main-nav ul li.nav-button a:hover {
      background:#418031;
      color:#FFFFFF;

[Leo]

GP’s menu is using the primary navigation, not secondary.

Try activate primary navigation back, then set it to float right: https://docs.generatepress.com/article/navigation-location/

Then the navigation logo should work.

Once you did that do I’ll have another look at the hover CSS 🙂

[Kevin]

Hi Leo,

I’ve reactivated the primary nav and deactivated the secondary nav.

[Leo]

Then you should be able to follow the steps here: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Did you try that?

[Kevin]

Hi Leo,

Yes I did 🙂 It was the cache … I just had to clear the cache.

Thanks for your patience!

[Leo]

No problem! Looks like you got the button working as well?

[Kevin]

Yup. I used the button class that we had previously created

Just a slight kink. On this page > http://meine-ec-karte.de/blog/ , there seems to be a gap at the top that’s not visible on all other pages

[Leo]

Hmm did you add this CSS somewhere?

@media (min-width: 769px) {
    nav#site-navigation {
        margin-top: 10px;
    }
}

[Kevin]

That was originally there … to adjust the Navi bar on mobile … the logo appears larger on mobile and shifts the Menu under

The original css looked like this:

@media ( min-width: 769px ) {
    nav#site-navigation {
        margin-top: 42px;
    }
}

I’ve been trying to adjust the Navi bar for mobile

[Leo]

For mobile only you will need @media (max-width: 768px)

@media (min-width: 769px) is for desktop only.

https://docs.generatepress.com/article/responsive-display/

[Author]

Posts