- This topic has 6 replies, 2 voices, and was last updated 7 years, 2 months ago by
Tom.
-
AuthorPosts
-
March 24, 2015 at 4:24 pm #91025
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!
March 24, 2015 at 5:34 pm #91039Tom
Lead DeveloperLead DeveloperTry this CSS:
.below-header-bar a, .below-header-bar a:visited { color:#FFF; } below-header-bar a:hover { background-color: #ffffff; color: #ce5973; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 24, 2015 at 8:12 pm #91052Alex
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!!
March 24, 2015 at 10:52 pm #91064Alex
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;
}March 24, 2015 at 11:49 pm #91073Tom
Lead DeveloperLead DeveloperAbsolutely – you can add custom CSS inside a media query for mobile:
@media all and (max-width:768px) { /* CSS in here is for mobile */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 25, 2015 at 1:01 am #91079Alex
That worked great! Thanks!!
March 25, 2015 at 9:20 am #91303Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.