Navigation menu has been broken
Hello. I'm redisigning my websites and I've came into a brickwall full speed while designing my main navigation menu. If you look at the screenshot, it shows the menu as a standard
<ul> list, and not like a navigation menu on a single line with the links being buttons.
This is the CSS responsible for the navigation styling:
The HTML responsible for the menu is as follows:
Live preview as I continue below: https://test.czghost.cz/_demo.lipsum.html
15 Replies
You need to make the ul a flexbox
I've run out of characters to type, so I have to continue here. My CSS addition to the menu starts at the hover variants, and this is the addition that broke it. Unfortunately, when I remove those variants (by commenting them out), it stays broken. I've also tried CSS nesting at first, which should work in Chrome (turns out it doesn't work in some proprietary browsers on Android and iOS just yet, as I've learned from the support table for this feature, but Chrome should support it in full extent, and that's the browser I use), then I've gone back to the roots of CSS with everything typed out. Didn't help. And when I comment out the code that broke it, it doesn't help either. It's just stuck at that. CSS Validator found a strange bug in nested CSS version where it failed to parse the entire snippet with a failure point being a line break at the very end of the snippet (second to last line), while this non-nested version passes the validator with flying colors. I really don't understand it. I've gone and made a mockup for the next screenshot to show how it was supposed to look like. It's strange it worked before and now it doesn't.
Oh, I'll try that, thanks.
Still not what I was looking for. There's no border around the menu items, and there's no vertical padding that I needed. Plus it seems like the padding is a bit small.
Does the CSS parser understand vars that are in a different CSS file?
Cuz I've got all CSS vars in
main.css and this code is in content.css.Depends what order the stylesheets are loaded in and what element the custom properties are on (:root vs other elements). You likely want to give the custom properties fallbacks or make sure they are declared in the same sheet they’re being used. Alternatively you could import all your stylesheets into one , in the correct order you want them loaded
Does this determine the order or is the order determined as the resources are downloaded?
Your selectors are wrong.
For example your HTML is this:
But your CSS is this:
That should be :
Is that why it doesn't work? 😄 Yeah, stupid me. 😄 Thanks 😄
Yeah, it works as expected now. Thank you so much!
I gotta pay attention to the order of classes. 😄
note, you don't actually need to prepend the "a", I just add that for clarity to help you see the issue. However it does increase specificity so no other elements with that class name (should they exist) will get the styles
I know. No other element with that class does indeed exist.
Personally I wouldn't even give those links a class name.
I would select them from the parent ul element
.menu-main > li > a{} but that is a different matter and I know others would disagree. 😆I kind of did it for semantic more than functional reason. I might actually rework it so it would work with the previous CSS, what I originally had in mind.