Trying to move image filled menu in top bar

  • Hey all,

    Relative noob to WordPress, so please be gentle. I’m using the Virtue Child Theme for my website at https://literaturegroup.com.

    I’ve replaced my menu items with images and love the new look. It’s minimalistic and exactly what I’m trying to do. I’m doing it with this code:

    <div style="background-image: url('/wp-content/uploads/Literature-Group-LOGO-3312x396-e1412800319309.png'); background-repeat: no-repeat; float: left; display: inline; margin: 0; padding: 0 0 0 0;"></div>

    However, if you look at the images you can see that they are hugging the top of the top bar. I would like to center them vertically, no matter how tall I set the top bar.

    I’ve tried setting the “margin-top: 10px”, played around with different padding levels (20px 0 0 0), and tried to use “padding-top: 10px”. None of which are helpful.

    Been trying to find the answer, but I’m really striking out. Any help would be very appreciated!

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

  • You’re on the right track. Firstly, as a best practice, create a class for the inline styles you have. It can be consolidated as follows:

    ‘.class-name {
    background: url(‘/wp-content/uploads/Literature-Group-LOGO-3312×396-e1412800319309.png’) no-repeat;
    float: left;
    display: inline;
    margin: 0;
    padding: 0;
    }’

    I don’t see the inline code on your page; you might have already done this.

    Since your logo is also hugging the top, you’ll want to add margin or padding to a div that contains both the logo and the menu, for instance, #topbar .container.

    Personally,

    I would remove the hardcoded height on your top navbar, and just add a top and bottom padding to the entire top nav.

    Something like this should work nicely for you:

    What you currently have is :

    #topbar {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 40px;
}

    Simply remove the height, and replace it with a padding decleration such as the following :

    #topbar {
  position: fixed;
  z-index: 10000;
  width: 100%;
  padding: 1em 0;
}

    And while I’m at it, I would adjust the icon padding in the navigation to the following:

    topbarmenu ul li a {
  padding: 15px 10px;
}

    Evan

    Thread Starter Conables

    (@conables)

    https://literaturegroup.com

    Evan,

    Thank you. It solved that problem but now the icons are hanging off the bottom. Can anyone tell me how to middle align the icons vertically to the existing top bar?

    Thank you in advance. It’s much appreciated!

    Thread Starter Conables

    (@conables)

    Oh, should clarify.

    I copied this `#topbar {
    position: fixed;
    z-index: 10000;
    width: 100%;
    padding: 1em 0;
    }` into the theme’s CSS box and what you see is what happened.

    Here is everything I have in the CSS now. 

    h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    text-align: center;
}
h4 {
    text-align: center;
}
h5 {
    text-align: center;
}
h6 {
    text-align: center;
}

p.main {
    text-align: left;
}

.postcommentscount {
display: none;
}

.topclass {
        background: ##3b5998;
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 40px;
}

.topbarmenu ul li a {
font-size: 30px;
}

.postdate, .kad-hidedate, .postdatetooltip{display:none;}
.subhead .postedintop, .kad-hidepostedin {display:none;}
.kad-hidepostauthortop, .postauthortop {display:none;}

.page-header {
display: none;
}

#topbar {
  position: fixed;
  z-index: 10000;
  width: 100%;
  padding: 1em 0;
}

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trying to move image filled menu in top bar’ is closed to new replies.