Archived topic
Disable primary navigation and keep secondary navigation
12 replies · Started by Kevin on September 6, 2017
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
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
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/
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;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 :)
Hi Leo,
I've reactivated the primary nav and deactivated the secondary nav.
Then you should be able to follow the steps here: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header
Did you try that?
Hi Leo,
Yes I did :) It was the cache ... I just had to clear the cache.
Thanks for your patience!
No problem! Looks like you got the button working as well?
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
Hmm did you add this CSS somewhere?
@media (min-width: 769px) {
nav#site-navigation {
margin-top: 10px;
}
}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
For mobile only you will need @media (max-width: 768px)
@media (min-width: 769px) is for desktop only.
