Grow your CSS skills. Land your dream job.

Nav Positioning Issue

  • # December 2, 2012 at 12:14 pm

    Hey Guys, i am having an issue with positioning of my navigation bar on a layout..

    Here’s the example: http://codepen.io/joe/pen/diBva

    As you can see the logotype is placed as needed, however the navigation is not. Two problems: It is under the logo and it is not positioned in the right side of the screen.

    I want to end up with such kind of styling: http://s55.radikal.ru/i148/1212/e9/dbe1cfc29119.png (screenshot).

    One more thing which confuses me is when i try to apply “float:right” to the CSS, nav elements are getting reversed.

    Hopefully someone can help me sort this out.

    Cheers

    # December 2, 2012 at 12:35 pm

    Here you go mate: http://codepen.io/andyunleashed/pen/vnmgw

    There’s a couple of things to look at here.

    You need to float the h1/img of your logo to the left, and make sure it’s displayed inline-block (as h1 is by default a block level element. I.E it automatically takes up 100% width of the container unless otherwise stated.

    Then float the Nav itself (not it’s Li’s) to the right so it sits where you want. After some padding here and there on the elements you can align everything nicely as needed.

    If you float li’s they automagically reverse order, so the best bet is to float the container (either the nav or the UL) and then just display them inline.

    Make sure to remove the CSS I added for the container_12 – I think you’re using a grid system so you should ignore that part as it’s probably covered in the default stylesheets.

    One thing to look out for when floating elements is that the container will collapse unless you use a clearfix. I’ve done a simple one which is overflow: hidden; but there the best one I can recommend is http://nicolasgallagher.com/micro-clearfix-hack/

    # December 2, 2012 at 1:47 pm

    @Andy_unleash,

    Thanks a lot. You’ve been very helpful indeed!

    Cheers

    # December 2, 2012 at 5:09 pm

    just a couple of comments:
    1) float overrides any display property, so you don’t need to set the h1 to inline-block
    2) you can float the li to the left and the ul to the right (although display: inline works just as well for the li) without reversing the order

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".