Grow your CSS skills. Land your dream job.

Issue postioning Nav menu

  • # January 28, 2013 at 12:25 pm

    Hi,

    I’m helping a friend with his website and need help with a nav menu.

    We need to try and get the nav menu to appear in the same position all the time instead of moving when the browser window is resized. There is also an issue on the Galaxy tab where the last menu item appears on the next line and pushes the slider image out of position.

    If some one could take a look I would really appreciate it.

    I’ve created a code pen here (I hope I did it correctly).

    http://cdpn.io/dkhvg

    http://codepen.io/anon/pen/dkhvg

    Thanks,

    runt

    # January 28, 2013 at 12:26 pm

    The website link is: http://www.fitzpatrickscasinogroup.com
    And it’s the nav menu to the right of the header.

    Thanks

    # January 28, 2013 at 12:31 pm

    I assume you are talking about the location menu?

    If so, where is it supposed to appear?

    # January 28, 2013 at 1:00 pm

    It’s appearing fine there, but when the browser window is resized the menu moves across the screen, and it also displays too far out to the right on some browsers.

    I only know fairly basic CSS so I assume I did something wrong when I was positioning the menu.

    Any help appreciated

    # January 28, 2013 at 1:22 pm

    you could use a media query and change the css when the menu overlaps.

    @media all and (max-width:700px){
    //your new css when the website is smaller than 700px.
    //you don’t have to recreate all your css here. just the css that you want to change.
    }

    # January 28, 2013 at 2:09 pm

    I would look into a different method positioning the menu in the first place rather than absolute positioning*.

    Perhaps putting it to the header (or whatever the top element is) and floating it right.

    *as you have found, it’s not really suited to responding to browser resizing.

    # January 28, 2013 at 2:17 pm

    I’ve solved it. Thanks for your time.

    # January 28, 2013 at 2:18 pm

    Cheers Paulie, hadn’t seen your answer but that’s exactly what it was.
    Used margin-left and position: relative instead and that solved it.

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

You must be logged in to reply to this topic.

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