Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to resize Top Nav Bar (Magazine Pro)
- This topic has 7 replies, 3 voices, and was last updated 10 years, 3 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
January 7, 2014 at 8:08 am #83788cuppyMember
I already asking this question before, but no response from anyone. Thats why I am asking again.
How to resize Top Nav Bar in Magazine Pro Theme and I also want to resize the font in that Top Nav Bar.
Here is the link to my site : http://mytech.my
http://mytech.myJanuary 7, 2014 at 2:05 pm #83868Tony @ AlphaBlossomMemberHello,
How exactly do you want to resize it (height, width)? Please be more specific.
To change the font size (top level item), you can add this to your theme's style.css:
.nav-primary .genesis-nav-menu > li > a { font-size: 18px; font-size: 1.8rem; }
If you want to change the submenu font-size, change the font-size of ".genesis-nav-menu .sub-menu a" around line 1252 (currently 12px/1.2rem).
Take care,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
January 8, 2014 at 9:26 am #83995cuppyMemberI am sorry because not being specific about that. I want to resize the height of the top nav bar.
Thanks for helping me with the font 🙂
January 8, 2014 at 10:26 pm #84117Tony @ AlphaBlossomMemberHi again.
If you want to adjust only the top nav, you can add this to your theme's style.css (I would put it under .genesis-nav-menu a around line 1224):
.nav-primary .genesis-nav-menu > li > a { padding: 15px 20px; padding: 1.5rem 2.0rem; }
You can change the 15px/1.5rem to whatever you need.
You'll also have to adjust your search box:
.nav-primary .search-form input { padding: 10px 16px; padding: 1.0rem 1.6rem; margin-bottom: 7px; margin-bottom: .7rem; }
Same here, adjust those numbers to get the look you want.
That should take care of it.
Have a great night,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
January 9, 2014 at 2:31 am #84139cuppyMemberI already add to my style.css (Magazine Pro Theme) and the height of top nav bar not decreasing/increasing when I adjust the size.
It will only bring the text in that bar closer to the top of browser. You can see the screenshot below.
Thanks for helping me.
January 9, 2014 at 10:32 am #84188Tony @ AlphaBlossomMemberHello, it looks like the search box isn't changing.
Can you put the code back in so I can take a look?
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
January 9, 2014 at 11:13 am #84199Genesis DeveloperMember.nav-primary .genesis-nav-menu a { padding: 14px 20px 12px; padding: 1.4rem 2rem 1.2rem; } .nav-primary input{ padding: 2px 16px; padding: 0.2rem 1.6rem; }
Add this code in your style.css file.
January 9, 2014 at 12:28 pm #84207Tony @ AlphaBlossomMemberSorry, I meant can you leave it on the site so I can see what's wrong?
The code above (both what I posted and what you posted) work for me so without seeing it on the site it's hard to say why it's not working for you.
It could be that you're placing them too early in your style.css and they're being overwritten by some existing code. You might try moving them further down, maybe at the end of the navigation styles, or at the end of the style.css file (before your @media queries).
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.