The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Change position of text in navigation bar, HTML/CSS
wessa
post 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:
Attached Image

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.
Attached Image

Any help with this would be appreciated.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 25 2021, 05:18 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:02 AM