htmlcssmobilenavigation

How to break a overflowed navigation bar via CSS

I've a navigationbar like these: http://www.gymnasium-templin.de/gym/index.php and try to develop a mobile version style via css mobile queries. When I resize the navigation bar, f.e. to 320 px (instead ov 900px), I've got a "overflow". I tried to use the overflow: in css to insert a automatic break. But there is no option to realize it. overflow: scroll; works, but I want to get a "line-break" and two "lines" or more with the navigation buttons. Have everyone a idea how to realize that?

Solution

  • You could use media queries, what this one does, is that as soon the screen is smaller than 330px, it will apply these css rules in between the brackets.

    @media only screen and (max-width:330px) {

    #element {
        change properties..
    }
}

    I'm not sure if I understood your question correctly, let me know.