[Solved] Help with centering my drop down menu & aligning my drop down menu


#1

Hi! It me again. I was wondering how do I center my drop down menu? Also, how do I align the drop down menu bar with the white background. Hopefully these questions make sense. Since I’m a new user, I can’t post a link to my blog, so here is the name of my blog: averagekpoppermideko.blogspot.com

I have the code here: #rbnavbar { background: #47bff0; width: 107%; color: #FFF; margin: 0px; padding: 0px; position: relative; border-top:0px solid #7f7777; height:35px; }

#rbnav { margin: 0; padding: 0; } #rbnav ul { float: left; list-style: none; margin: 0; padding: 0; } #rbnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #FFF; border-right:1px solid #FFF; height:35px; } #rbnav li a, #rbnav li a:link, #rbnav li a:visited { color: #FFF; display: block; font-family:normal 20px Nunito; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none;

} #rbnav li a:hover, #rbnav li a:active { background: #ef9c00; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px;

} #rbnav li { float: left; padding: 0; } #rbnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0px; padding: 0px; } #rbnav li ul a { width: 140px; } #rbnav li ul ul { margin: -25px 0 0 161px; } #rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul { left: -999em; } #rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul { left: auto; } #rbnav li:hover, #rbnav li.sfhover { position: static; } #rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited { background: #ef9c00; width: 120px; color: #FFF; display: block; font-family:normal 20px Nunito; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #fff;

} #rbnav li li a:hover, #rbnavli li a:active { background: #47bff0; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }


#2

Find this in your code and replace your code like this

#rbnavbar { background: #47bff0; width: 100%; color: #FFF; margin: 0px; padding: 0px; position: relative; border-top: 0px solid #7f7777; height: 35px; display: block; text-align: center; }

#rbnav li { list-style: none; margin: 0; padding: 0; border-left: 1px solid #FFF; height: 35px; display: inline-block; float: none !important; }

add extra css code to give a border to last li

#rbnav li:last-child { border-right: 1px solid #FFF; }


#3

Thanks for the information. Everything works out pretty good but the center is off and there is no line in front of the Kpop Edits

Do I add this code? rbnav li:last-child { border-right: 1px solid #FFF; }

below this code? #rbnav li li a:hover, #rbnavli li a:active { background: #47bff0; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }

Here is my blog:averagekpoppermideko.blogspot.com I can’t show you a picture since I’m still new here.


#4

Yes add this code to see the effect and tell me it is working or not


#5

What is this code suppose to do? rbnav li:last-child { border-right: 1px solid #FFF; }

Because it not working for me.


#6

You Should Add the Custom Menu-bar… Here the Many Menu-bar, pickup the one… :slight_smile: :slight_smile:

Menu bar

and suggest you the Style #11 and #16


#7

I like the menu bar I have. The only things I need help with is matching the menu bar with the white background and having a white line in front of Kpop Edits. What do you mean style #11 and #16?