How to change the size of my website menu bar?

  • Resolved Rapforthemoment

    (@rapforthemoment)


    9 years, 2 months ago

    Hey guys. I need a bit of assistance. On my website http://www.rapforthemoment.com my website bar is white with black text. If you can see, the black text is not centered in the bar, and by that, I mean the there is more space of white on the bottom of the menu bar than the top. I think this is called padding, or something?

    Can you help me decease the bottom to center the text height-wise? Here is the code I am using, I just need the code for the height or padding chance.

    .container-full.top-header {
    background-color: #FFFFFF !important;
    background-image: none !important;
    }

    Thank you in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Marvel Labs

    (@royalprince)

    9 years, 2 months ago

    Edit your style.css theme file and insert the following
    or
    install a plugin Custom CSS

    and insert the following code
    .main-navigation .nav {height: 40px;}

    You can edit 40px to your choice

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 2 months ago

    Your menu items have a bottom margin of 10 pixels:

    1. Open your website in Chrome;
    2. Right click on a menu item;
    3. Left click on “Inspect element”;
    4. A new toolbar appears. Hover your mouse over the <li> element.
      Orange represents margin and green padding;
    5. Click on the <li> element and look to the right of the toolbar;
    6. In the right hand column scroll down until you see this style: 
      .main-navigation .nav > li {
    float: none;
    display: inline-block;
    margin-bottom: 10px;
    zoom: 1;
}

    Override that in your Child Theme style.css file;

    .main-navigation .nav > li {
    margin-bottom: 0;
}

    Edit: You might want to apply that to desktop only.

    Thread Starter Rapforthemoment

    (@rapforthemoment)

    9 years, 2 months ago

    Thank you guys! YOU DID IT!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change the size of my website menu bar?’ is closed to new replies.