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?
No description
18 Replies
Chooβ™šπ•‚π•šπ•Ÿπ•˜
Your approach is fine, but adding padding to the anchor tag would make this also work without using the extra div.
Solo Incrementing
Solo Incrementingβ€’14mo ago
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
snxxwyy
snxxwyyβ€’14mo ago
you should try to avoid setting fixed widths and heights. You should let the content decide that.
Solo Incrementing
Solo Incrementingβ€’14mo ago
ya I used only rem vh/vw and % for my widths and heights isn't that fine?
snxxwyy
snxxwyyβ€’14mo ago
in some situations, generally speaking you should try not to. Rather than setting 20vw for your logo background you can simply just add padding.
Solo Incrementing
Solo Incrementingβ€’14mo ago
what unit do I use for padding then? Caus I need the padding to change depending on the screen size
snxxwyy
snxxwyyβ€’14mo ago
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-
padding: clamp(min, Xvw, max);
padding: clamp(min, Xvw, max);
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.
snxxwyy
snxxwyyβ€’14mo ago
for example, you can simplify this section of code by adjusting it to the following-
.header-logo-section {
background-color: rgba(20, 41, 89, 0.4);
display: flex;
height: 100%;
width: 20vw;
align-items: center;
justify-content: space-around;
transition: background-color 0.15s;
}

.header-logo-section {
background-color: rgba(20, 41, 89, 0.4);
padding: 0 1.5em; /*Change depending on size*/
transition: background-color 0.15s;
}
.header-logo-section {
background-color: rgba(20, 41, 89, 0.4);
display: flex;
height: 100%;
width: 20vw;
align-items: center;
justify-content: space-around;
transition: background-color 0.15s;
}

.header-logo-section {
background-color: rgba(20, 41, 89, 0.4);
padding: 0 1.5em; /*Change depending on size*/
transition: background-color 0.15s;
}
Solo Incrementing
Solo Incrementingβ€’14mo ago
oh ya I just used display flex to easily center
snxxwyy
snxxwyyβ€’14mo ago
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.
Solo Incrementing
Solo Incrementingβ€’14mo ago
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
snxxwyy
snxxwyyβ€’14mo ago
yeah you would typically use flex to display nav menu links side by side. Again you can simplify that by doing something like this-
.header-menu {
height: 100%;
width: 40vw;
display: flex;
align-items: center;
justify-content: space-evenly;
}

.header-menu {
display: flex;
align-items: center;
gap: 1.5em;
}
.header-menu {
height: 100%;
width: 40vw;
display: flex;
align-items: center;
justify-content: space-evenly;
}

.header-menu {
display: flex;
align-items: center;
gap: 1.5em;
}
Solo Incrementing
Solo Incrementingβ€’14mo ago
what does gap do
snxxwyy
snxxwyyβ€’14mo ago
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.
Solo Incrementing
Solo Incrementingβ€’14mo ago
Ah I see Could you provide some guidance with my questions on using inherit for anchor styling and the root question?
snxxwyy
snxxwyyβ€’14mo ago
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-
<a class="header-menu-category" href="#">
<div class="header-menu-category__name">Solar System</div>
</a>

<a class="header-menu-category" href="#">Solar System</a>
<a class="header-menu-category" href="#">
<div class="header-menu-category__name">Solar System</div>
</a>

<a class="header-menu-category" href="#">Solar System</a>
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. @Kriyes
Solo Incrementing
Solo Incrementingβ€’14mo ago
Ah 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!!
snxxwyy
snxxwyyβ€’14mo ago
no worries! ah well there you go!
Want results from more Discord servers?
Add your server