Hi tagDiv,
I want to change how the menu on Header Style 8 looks like.
First, I want to remove the border on the bottom which shows up when someone hovers on menu items:
Then I want to make it so it changes color on hover (and the border is hidden). So it looks like this: http://screencast.com/t/hKznv8GivPl
I also want to make it so that the “active page” thing doesn’t show the border at the bottom and only change the text color.
Please help ASAP.
Thanks!
Hi,
Use this css to remove the border:
.td-boxed-layout .td-menu-background .td-menu-wrap {
background-color: transparent !important;
border-bottom: none;
}
.td-full-layout .td-menu-background, .td-boxed-layout .td-menu-wrap {
background: none !important;
border-bottom: none;
}
.td-full-layout .td-menu-background:after, .td-boxed-layout .td-menu-wrap:after {
display: none !important;
}
.sf-menu > .current-menu-item > a, .sf-menu > .current-menu-ancestor > a, .sf-menu > li > a:hover, .sf-menu > .sfHover > a {
border-bottom: none !important;
}
.td-menu-wrap {
height: auto !important;
}Use this css to target and style the menu item on hover as you like: http://screencast.com/t/aHZiKiXj
.sf-menu .td-not-mega > a:hover {
text-decoration: none !important;
background-color: #c335ea !important;
}You don’t’ have to worry about the current page highlight because this will be removed with border bottom css.
Thanks
Hi
It works but I want to change the text-color and not the background color. I tried this:
.sf-menu .td-not-mega > a:hover {
text-decoration: none !important;
color: #4db2ec !important;
}But didn’t work. Help.
Hi,
Use it like this: http://screencast.com/t/fPX7mDOuGq
.td-menu-header .td-li-wrapper-menu .sf-menu > li > a:hover {
text-decoration: none !important;
color: #4db2ec !important;
}Thanks
Hi,
It worked but the thing is, I want to the menu items’ text to be #4DB2EC when they’re “active” or its a current page.
Is it possible?
Thanks
Hi,
Use this: http://screencast.com/t/R2sbQHswC
.td-style-8-menu-wrapper .td-li-wrapper-menu .sf-menu .current-menu-item a {
color: red !important;
}Thanks
Hi,
The CSS Worked but I have noticed that there is a simple issue with it: http://screencast.com/t/JpS0pQWc9DL
The color of the post titles also changes if the page is active. Is there any way we can fix it?
Thank you!
@mehedi thx for asking how to do this,i was playing around for weeks to do this and could not get it right..now my site look better with out that border and lines..and the hover over color is awesome,i wish the team can make style 8 like this… instead we using CSS code because it look really nice after adding the CSS code…
Yep. Header Style 8 literally changed the look of my website and it looks awesome. Although there was some bugs đ
Its roboto condensed with font-weight:300
very nice…
