Navigation Bar CSS Won't Center Text

  • Resolved The Beallman

    (@the-beallman)


    8 years, 8 months ago

    Hi!

    I’m currently designing a new WordPress theme, starting from the bottom of the page up, but I’m using CSS elements I’m not familiar with in my navigation bar.

    Most pressing, despite numerous CSS and header.php changes, I’m unable to center my .nav text and, no matter what CSS I try, the submenu for “Past Winners” will not work.

    Lastly, I’m trying to bring the image map in the header down to the .nav bar and having issues comparable to the first two problems I noted.

    Any help with this matter is most appreciated. Thank you!

    Website link

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter The Beallman

    (@the-beallman)

    8 years, 8 months ago

    Bumping the thread.

    Oddly enough, WordPress is now giving me a horizontal scroll bar at the bottom of my browser that wasn’t there before. You could say this navigation bar has me stumped…

    Tahoerock

    (@tahoerock)

    8 years, 8 months ago

    Hi TB
    It look it is not CSS issue but you have messed up menu and submenu and back menu for some reason.
    SEe the pix attached:

    PIX

    Hope this will give you clue, what you did
    Cheers
    TR

    Thread Starter The Beallman

    (@the-beallman)

    8 years, 8 months ago

    Thanks, Tahoe!

    I played around with things a bit, and it was definitely a CSS issue. Specifically, with my menu/submenu/back menu layout.

    However, now that I’ve gotten that fixed, I’m still unable to center the text in the header. “text-align:center” centers my imagemap, but it does nothing for my nav bar text.

    Thread Starter The Beallman

    (@the-beallman)

    8 years, 8 months ago

    Bumping this once more.

    After enough trial and error, my submenus, image map, and layout are working just fine. BUT, the #main-nav links and text still won’t center on the navigation bar.

    I’m basically at a dead end at this point.

    Tahoerock

    (@tahoerock)

    8 years, 8 months ago

    Hey TB,
    I do not understand why you have such a diff layouts for the link you sent to us and when we click on any other page it is just some other layout.

    I did screenshot.

    Is it some kind of landing page??

    Are you trying to accomplish this new layout or what is it all about????

    Cheers
    TR

    Thread Starter The Beallman

    (@the-beallman)

    8 years, 8 months ago

    Ah, I should have noted that in the first post.

    The theme on the right is the current theme everyone sees. The theme on the left is the one I’m having trouble centering the header text on. I have it running on an administrative level, so if you want to view a page other than the one I linked with the theme applied, just add the “?theme=UberAudio” prefix to the end of the URL.

    Thread Starter The Beallman

    (@the-beallman)

    8 years, 8 months ago

    SOLVED!

    I did some digging through the Support archives, and the solution to my problem was painfully simple (though not strikingly obvious).

    The original solution can be found in this thread, but I’m posting my final code here in case anyone needs it:

    I added

    #menu-nav { text-align:center; }

#menu-nav ul { display:inline-block; }

    And finally, the part that wasn’t so obvious:

    '#menu-nav div {
	margin: 0 0 0 0;
}

    Emphasis on the div. That div was likely the one thing I hadn’t tried, but it worked like a charm!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Navigation Bar CSS Won't Center Text’ is closed to new replies.