Navigation keeps "jumping" to next line?

  • Resolved j4ze

    (@j4ze)


    11 years, 4 months ago

    For some reason, my navigation-bar keeps jumping to next line, when i resize my browser window. Even though there is plenty of space before “hitting” the logo.

    My site is here: https://selectedbloggers.cphadsdemo.dk

    I’ve tried with display: inline-block, position: relative and a lot of other things found by searching the interwebs and this forum, but nothing seems to get the job done ??

Viewing 6 replies - 1 through 6 (of 6 total)

  • You have 64px top padding on this element:

    #menu-container

    When you reduce the size of the browser it pushes that down and the padding then, is too much.

    A media query could sort that.

    Thread Starter j4ze

    (@j4ze)

    I appreciate your answer, martcol, but my problem is when i resize the width of the browser – so i dont think it has something to do with the top padding. The reason for the top padding is so that the navigation will stay at the bottom of the header.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like your issue is with using floats; floated elements will naturally drop below one another when there isn’t enough room for them to sit aside.

    Which theme are you using?

    Thread Starter j4ze

    (@j4ze)

    Im using a custom theme called photolux. Would it be better to drop the floating left and right and maybe just display: inline-block; on the two elements?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can get away with not floating the menu container at all, just keeping the logo container floated left. You may also need to get rid of the width set in the menu container.

    Thread Starter j4ze

    (@j4ze)

    Thank you Andrews! I simply removed float and width from the menu-container and kept float:right on the logo-container, so now i works like a charm ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Navigation keeps "jumping" to next line?’ is closed to new replies.