The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Navigation trouble

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #146354

    Having trouble with my nav bar. I want the links centered with logo image in middle.
    here is a link to image of what I am trying to do:

    Here is source code, but I’ve been fumbling around with so much, it is messy.

    How can I achieve this properly in css?


    Tom Houy

    The first thing I would point out is that it doesn’t really make much sense in terms of your HTML structure to have your logo embedded in an unordered list like that. I would instead suggest to just place your logo first on the page, then followed by an unordered list with your navigation links in them.

    From there, all you would have to do is just create a standard horizontal menu and center it, but add some additional margin between the 2nd and 3rd menu items to distance them as far apart as the logo is wide. Then set a negative margin on the unordered list itself to bring the menu buttons up beside the logo as you have it pictured.

    Also, I would typically let the font size and padding of the styles of the anchor tags within the list dictate the overall menu height, rather than trying to hard code a height in on the UL tag.

    Edit: You could also use the “n-th” child selector to target the middle navigation buttons to give them different margins rather than assigning custom classes to those within the HTML.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.