Moving Main.nav up/down – closer to Header Logo

  • im trying to move my main.nav bar higher to the image at the top of the page. https://www.cuckooavenue.com Ive played around with the padding but dont know how to move it up and down. this is what the CSS looks like

    /***** Navigation *****/

    .main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; text-align:center; }
    .main-nav li { display:inline-block }
    .main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
    .main-nav li a:hover { color: #000; }
    .main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
    .main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
    .main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
    .main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
    .main-nav ul ul { display: none; position: absolute; left: -20px; }
    .main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
    .main-nav ul ul ul { left: 100%; top: 0; }
    .tinynav { display: none; }

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hey – it looks like the padding on the image at the top is keeping the nav from moving up any higher. If you remove the padding from the bottom of the image it will allow your nav to move up a bit.

    Try – 

    .logo-wrap {
	padding-bottom: 0;
}

    Does that help?

    Thread Starter CuAv

    (@cuav)

    Hi ,sorry for the late reply, where is the logo wrap text?

    Thread Starter CuAv

    (@cuav)

    .logo-wrap { position: relative; overflow: hidden; min-height: 80px; padding: 42px 0 30px; }

    Hey CuAv – yeah, that’s the rule set I was talking about. That last value, 30px, in the padding declaration – that was bumping the nav down.

    Did you get everything squared away?

    Thread Starter CuAv

    (@cuav)

    yeh,it seems to work. Only problem now is that the content below is too close to the main.nav . Do you know how I move the content down?

    the site is https://www.cuckooavenue.com

    also, you dont know a good site to try and find somebody to pay to help build my site do you? Im an amateur as im sure you can tell. Im enjoying learning but time doesnt hang around and got to get it up and running soon.

    Thanks,

    Hey, no problem. You can move the content down by adding padding-bottom to the nav, like so – 

    .main-nav {
    padding-bottom: 20px;
}

    Alternately, you could add some padding-top to the item below, ie. 

    .wrapper {
    padding-top: 40px;
}

    Adjust the pixel value to taste; either of those rule sets should give you the same result.

    Hope that helps!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Moving Main.nav up/down – closer to Header Logo’ is closed to new replies.