Header navigation bar
So I have a header nav at the top of the page as shown in image.
all the code:
https://stackblitz.com/edit/web-platform-us4b5p?file=index.html
I want to make the entire blue square the link to the home page, not just the text.
I have a few questions relating to the above situation:
Is it okay for me to style the anchor element as if they were divs like I have done? What could I do alternatively if I shouldn't do that?
The default anchor styling was ruining the aesthetic, so I made the relevant properties "inherit", should I have just updated the stylings within the specific class instead?
Slightly off topic, but do the variables defined in a :root in one css file work in the other css files or do I have to redefine them in the files I use them?
18 Replies
Your approach is fine, but adding padding to the anchor tag would make this also work without using the extra div.
wouldn't that be more complicated because I'm setting the width using viewport width
unless I use vh/vw for the padding.. but making the anchors flexboxes makes it easy to center
you should try to avoid setting fixed widths and heights. You should let the content decide that.
ya I used only rem vh/vw and % for my widths and heights isn't that fine?
in some situations, generally speaking you should try not to. Rather than setting
20vw for your logo background you can simply just add padding.what unit do I use for padding then? Caus I need the padding to change depending on the screen size
if you need it to change depending on the screen size, look into
clamp. in general situations you tend to use em or rem. You can find an explanation of clamp here- https://developer.mozilla.org/en-US/docs/Web/CSS/clamp. In simple words, it allows you to set a minimum, preferred, and maximum value. So for your padding you'd do something as such-
clamp() - CSS: Cascading Style Sheets | MDN
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
for example, you can simplify this section of code by adjusting it to the following-
oh ya I just used display flex to easily center
i understand that, there's nothing wrong with that, but it's redundant, you don't need to do that. You should really only use flex when you need it.
ya, it does make the code cleaner with ur way
What about for those other menus I have on the right, is using flexbox for that section fine? talking about the header-menu
yeah you would typically use flex to display nav menu links side by side. Again you can simplify that by doing something like this-
what does gap do
it allows you to create spacing between your flex items. It works with grid too but let's not look at it regarding that as we're using flex here.
Ah I see
Could you provide some guidance with my questions on using inherit for anchor styling and the root question?
yeah for sure, let me take a look.
so for the anchor tags, you don't have to add the extra div, You can simply change it to this-
inherit does work however i don't recommend doing it that way.
inherit takes the value from it's parent and you're more than likely going to use anchor tags outside of your navbar. With what you have, let's take color: inherit; for example, if you place an anchor tag in a div with the styling color: red; on it lets say, where all text in the div is red, and you don't want your anchor tags to be, they will be. I'd either recommend styling the anchor tags specifically inside of the header, such as header a {} (for this though, i'd give the header a class so it doesn't clash with other potential headers, so you could do .primary-header a {}) or set the straight properties, such as text-decoration: none;, color: white; etc.
i haven't personally tried the root one, however i don't believe it does carry over, i could be wrong though.
@KriyesAh very well, thanks for the help!
I tried the root thing, I put the root variables in general.css and used the variables in nav-bar.css, it works across files!!
no worries!
ah well there you go!