使导航菜单响应

Question

This is the first time I am doing any css after college. I have managed to write this pen :

Navigation with hover effect

But If you resize the browser, everything gets messed up. So far I have just used bootstrap to make website prototypes. But now I am trying to learn some design myself.

How should I go ahead solving problems like this .

Here is the code : pen

Answer 1

The typical best practice here would be to know your toolbox. You are not forced to utilize all of bootstrap by including it. However, you can reasonably simply override the default stylings by simply making a styles.css and just using navbar or navbar-fixed or whatever class you want, and then putting your own CSS in styles.css and you get the best of both words.

Answer 2

You should do some researches about media queries , which will allow you to adapt your styles for every screen sizes. After that, you will be able to set different paddings or margins (for example) when the screen is resized.

Answer 3

To fix the problem where it breaks, you need to add this to your class

.bmenu li {
    border-right: 1px solid rgba(20, 0, 0, 0.4);
    clear: both;
    display: inline-block;//This will stop your nav from overflowing over eachother
    font-size: 20px;
    font-weight: bold;
    height: 20px;
    padding: 20px;
}

I would still use media queries and just adjust for each size. You may at some point need to stack. Go to CSS-tricks.com and see how Chris does his nav when you resize the browser. Hope this helps.