Excuse the rough draft, I still have a lot of work left to do. I am having trouble with the fixed navbar on top. I have a logo that I want to be included inside the blue navbar, but I can’t seem to figure out how to include it.
I’ve tried placing it in header instead but it causes styling issues. I also would like the About Us to stay as far to the right as possible, separate from the other nav-links.
Any help or hints would be greatly appreciated.
I’ll get you started. I would use flex on the <ul> instead of float on the <li>s. And then you might find the CSS property flex-grow interesting.
Thanks for responding!
Would i have to add it to my ul class of .nav-list and take away the float: left from .navbar-list?
I tried and it does keep the navbar on top but the flex-grow property doesn’t seem to be doing anything, so I must be doing something wrong?
Yes, that is the first step. I would also recommend for now that you remove the side margins on the <li>s and the left positioning on the last <li>. After doing that then you will just have to take care of moving “About Us” to the far right. This is where flex-grow will come into play. See the CSS Tricks docs on how to use it.
There are several other things you’ll need to change in order to get this looking real good. I don’t want to give it all away as that takes away from the fun. I would suggest that you don’t set widths on things if you don’t need them. Use max-width instead to keep them from getting too big. Also, get rid of all side padding/margins and positioning in your menu and just get the basic look the way you want it first. Then you can add in all those little details as needed.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.