[Resolved] after header content

[Alex]

I used your example from different post (http://generatepress.com/forums/topic/adding-additional-header-on-the-top-of-the-webpage/) and got almost what I needed, but instead of above, I made it below. What I am trying to do is replicate secondary nav behavior. On mouse over, change background to white and text to red. You can see example on my site now. At the very top is the second nav that works as it should, now I want exactly that below my head without having to use the second nav. Please help me out. Thanks!

http://www.themagiccombs.com/blog/

[Tom]

Try this CSS:

.below-header-bar a,
.below-header-bar a:visited {
    color:#FFF;
}
below-header-bar a:hover {
    background-color: #ffffff;
    color: #ce5973;
}

[Alex]

That almost works great. Unfortunately, it leaves lines at top and bottom now and doesn’t add any space in front and end of text to make a rectangle. I applied it, check it out http://www.themagiccombs.com/blog – hover over the phone number. Again, appreciate your help!!

[Alex]

I almost got it figured out.. I made them css buttons. Code is below… One questions though, on mobile, is it possible to change css values (text size, padding, etc…)?

.below-header-bar {
padding: 1px 0px 0px 0px;
background: #1cbabc;
text-align: right;

}
.btn-below-header {
background: #1cbabc;
color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
padding: 2px 15px 1px 15px;
text-decoration: none;
}

.btn-below-header:hover {
background: #ffffff;
color: #ce5973;
text-decoration: none;
}

[Tom]

Absolutely – you can add custom CSS inside a media query for mobile:

@media all and (max-width:768px) {
      /* CSS in here is for mobile */
}

[Alex]

That worked great! Thanks!!

[Tom]

You’re welcome 🙂

[Author]

Posts