CODEWITHSUNDEEP
htmlcss
Huw Rowlands
Huw Rowlands

Reputation: 591

Make Navigation Full Height

How would I be able to make the navigation on this test site the full height of the dark grey bar (header), and vertically centered? http://website-test-lab.com/sites/mfm/

You can see that the red background of the home link is not filling the dark grey bar area height wise. The site including the menu is responsive.

EDIT: Apologies for the lack of code example but there is too much CSS involved to be added here or jsfiddle for example. If you could use Dev Tools/Firebug that would be much appreciated.

Thanks.

HTML:

<header id="masthead" class="header clearfix" role="banner">

<!-- logo -->
  <div class="logo grid-15 tablet-grid-15">
   <a href="#">
    <img src="#/library/img/mfmlogo.jpg" alt="#" class="logo-img">
   </a>
  </div>
<!-- /logo -->

<!-- nav -->
  <nav id="header-menu" class="nav grid-85 tablet-grid-85" role="navigation">
    <ul class="nav-list clearfix">
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-32 current_page_item menu-item-46"><a href="http://website-test-lab.com/sites/mfm/">Home</a></li>
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://website-test-lab.com/sites/mfm/about-us/">About Us</a></li>
</ul>
  </nav>
<!-- /nav -->

</header>

CSS:

#masthead {
    margin: 15px 0 0 0;
    background: #363737;
    position: relative;
    display: block;
}

.logo {
    padding: 10px;
}

Upvotes: 0

Views: 136

Answers (1)

Ravi Chand Dudala
Ravi Chand Dudala

Reputation: 48

Set margin-top for .nav as #masthead .nav{ margin-top:0px; }

and set padding like #masthead .nav ul li a{ padding:31px 15px; }

Upvotes: 1

Related Questions