Change position of text in navigation bar, HTML/CSS |
Change position of text in navigation bar, HTML/CSS |
wessa |
Feb 25 2021, 04:25 PM
Post
#1
|
Group: Members Posts: 2 Joined: 25-February 21 Member No.: 27,824 |
So I have a navigation bar below. All the buttons have icons and text beneath the icons. I'm trying to figure out how to position my text in the middle of the navigation bar rather than the top. I tried playing around with the margins by doing something like "margin: 20px 0 0 0" and while it does move the text closer to the middle of the bar, the hover element starts lower than it should.
HTML: CODE <div class="navbarHeader"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i><br/>Home</a> <a href="#"><i class="fa fa-fw fa-search"></i><br/>Search</a> <a href="#"><i class="fa fa-fw fa-envelope"></i><br/>Contact</a> </div> CSS: CODE .navbarHeader { z-index: 5; position: absolute; width: 432px; background-color: #F7F7F7; overflow: hidden; height: 110px; top: 70px; left: 1426px; } .navbarHeader a { z-index: 5; position: relative; float: left; width: 120px; padding: 12px; color: #A9A9A9; text-align: center; vertical-align: middle; text-decoration: none; font-size: 18px; /*margin: 20px 0 0 0;*/ } .navbarHeader a:hover { background-color: #000; height: 100px; } .navbarHeader .active { background-color: #3F3C5B; height: 100px; } @media screen and (max-width: 500px) { .navbarHeader a { float: none; display: block; } } This is how my navigation bar currently looks like. As you can see, the text is too close to the top: This is how my navigation bar looks like with the margin element. While the text is where I want it to be, it changes where the black hover element starts so that it doesn't match with the height of the navigation bar. Any help with this would be appreciated. |
pandy |
Feb 25 2021, 05:18 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
OK, so you have a big screen. So have I. But I seldom use a maximized window. For many people that menu will be outside their screen. To position individual items relative the browser window is a bad idea most of the time. Please rethink that.
Why is A positioned relative and why does it have z-index? Neither seems to be used for anything. When it comes to the vertical alignment. Remove the heights. Remove the BR tags you have inside the As. Use top and bottom padding on A to get the height you want and the text will be vertically centered. Just about anyway. |
Lo-Fi Version | Time is now: 17th April 2024 - 07:02 AM |