Archived topic
Header Navigation Button/Border
9 replies · Started by Felix on November 13, 2020
Hi Team GP,
I implemented a border around a menu-item according to a CSS that I found in this forum. Moreover, I want it to change its background-color and text-color when hovered over.
It works fine, except on the front page. There is a "Home Page Hero – Merged"-element (Merch-Theme), that sets a header background color, which might be the problem. Any idea, how the issue can be fixed?
Cheers
/* style highlight menu button */
@media (min-width:769px) {
.main-navigation .main-nav ul li.schatz-menu a {
/*background-color: #ffffff;*/
border: 2px solid #f4b429;
color: #000000;
line-height: 60px; /*this number will likely need to be adjusted*/
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.schatz-menu a:hover {
background-color: #ffd700;
border: 2px solid #f4b429;
color: #ffffff;
line-height: 60px; /*this number will likely need to be adjusted*/
}
}
/* style highlight floating-menu button */
@media (min-width:769px) {
/*.main-navigation.sticky-navigation-transition .main-nav > ul > li > a*/
.main-navigation.sticky-navigation-transition .main-nav ul li.schatz-menu a {
/*background-color: #ffffff;*/
border: 2px solid #f4b429;
color: #000000;
line-height: 80px; /*this number will likely need to be adjusted*/
}
}
@media (min-width:769px) {
.main-navigation.sticky-navigation-transition .main-nav ul li.schatz-menu a:hover {
background-color: #ffd700;
border: 2px solid #f4b429;
color: #ffffff;
line-height: 80px; /*this number will likely need to be adjusted*/
}
}Hi there,
Replace this:
@media (min-width:769px) {
.main-navigation .main-nav ul li.schatz-menu a {
/*background-color: #ffffff;*/
border: 2px solid #f4b429;
color: #000000;
line-height: 60px; /*this number will likely need to be adjusted*/
}
}
@media (min-width:769px) {
.main-navigation .main-nav ul li.schatz-menu a:hover {
background-color: #ffd700;
border: 2px solid #f4b429;
color: #ffffff;
line-height: 60px; /*this number will likely need to be adjusted*/
}
}With this:
@media (min-width:769px) {
.main-navigation .main-nav ul li.schatz-menu a {
/*background-color: #ffffff; !important*/
border: 2px solid #f4b429 !important;
color: #000000 !important;
line-height: 60px; /*this number will likely need to be adjusted*/
}
.main-navigation .main-nav ul li.schatz-menu a:hover {
background-color: #ffd700 !important;
border: 2px solid #f4b429 !important ;
color: #ffffff !important;
line-height: 60px; /*this number will likely need to be adjusted*/
}
}Nice, thank you!
Just a quick follow up question on the floating navigation: where/how exactly can I add a padding/margin right and left. I checked in the Customizer, but can't find anything under "Layout->Header", where I activated the floating menu.
Cheers
where/how exactly can I add a padding/margin right and left.
Not quite sure if I understand - What exactly are you trying to do here?
The green part here is the header padding if that helps?
https://docs.generatepress.com/article/header-padding/
It might be called "sticky header" (I gotta translate, since I m using Wordpress in German).
If you check my website, you can see that there is a padding around the header. However, if you scroll down, you will notice that the sticky header has none. Where can I set the padding for that "sticky" header?
Cheers
Hi there,
try adding this CSS:
@media(min-width: 769px) {
#sticky-navigation .inside-navigation {
padding: 20px 64px 20px 64px;
}
}Then change the Customizer > Layout > Sticky Navigation --> Menu Item Height to match the menu item height in Customizer > Layout > Primary Navigation.
It is almost perfect now, except the 10px padding, which is wrapping the logo in the sticky-navigation, hence, makes it smaller. I would like to get rid of that padding: Can you help me out?
I cannot find anything under Customizer > Layout > Sticky Navigation, where I've chosen the sticky-nav logo.
Try this CSS:
.navigation-stick .navigation-branding img {
padding: 0;
}Great, all fine now. Thank you guys very much!
Have a nice day
No problem :)
