Forums

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

Home Forums CSS Menu disappears when resizing window

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #208733
    HoratioHuffnagel
    Participant

    So I’ve been trying to get a very simple menu / logo combination happening for a WP theme. The issue i’m having is that I don’t want the menu to slide under the logo on the left hand side (red box in the example). In order to do that, I made the enclosing div 100% of the size of the navigation bar.

    But when the window resizes, it just vanishes when it can no longer fit on screen. Removing the 100% height of the logo results in the correct menu behaviour, where the menu items begin to wrap. Now I will be using media queries to collapse the menu later – but I am not able to anticipate the exact with of the menu, so I’d really prefer it didn’t vanish if someone decided to add a lot of items to their menu.

    Any help would be greatly appreciated.

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

    (I realised shortly after, the menu is just sliding out of the div and is just invisible because of the white on white text – but the issue is still the same – so yes, any thoughts on how this could be better achieved would be great thanks!)

    #208740
    Thomas Ree Hjelm
    Participant

    Your div.menu is collapsing – read more about floats and collapsing here : https://css-tricks.com/all-about-floats/

    Add a clearfix to the div.menu and float the li elements to the right instead of the ul elements. Now the elements will pop below each other one by one when you shrink the width of the browser window. Not sure if that’s any better for you?

    Here’s a fork of the pen : http://codepen.io/anon/pen/PPbjXB (hopefully that link works, I don’t have an account on CP yet, need to fix that.)

    #208784
    HoratioHuffnagel
    Participant

    Thanks – that’s perfect. I should have known really – I’ve spent to much time on the backend. :)

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