Navigations menu problemos

HTML & CSS
1

Problem #1: The hover bottom border on nav1,2, and 3 makes the text shift up. How do i get it to stay put?
Problem #2: For my media query 1120px, the menu has too much space to the right and isn’t contained anymore. How can I even it out? Also for some reason codepen refuses to show my menu icon that i am trying to put the items in. Basically I want it to still follow the page container rule and have the same width as it did before.
codepen

2

You should never cause a reflow when hovering so make sure when you add something it is already accounted for in some way. The easiest way is to set a transparent border by default so it takes up room but is invisible.

e.g.

.nav1, .nav2, .nav3 { border-bottom:4px solid transparent;}
.nav1:hover, .nav2:hover, .nav3:hover {
  border-bottom: solid 4px var(--light-brown);

I’m not sure why you felt thw need for the extra div inside the anchor but that’s a question for another day :slight_smile:

You have display:none on .burgermenu at line 194. so it is always hidden. Your media query is at about line 10 and is therefore over-ridden by styles later in the css. Remember that media queries don’t avoid specificity and must be in the cascade at the appropriate point. i.e. put the media query after the original rule in the CSS.

Not sure I follow can you clarify a little. I notice you have justify-content:center on .navbar so perhaps you should use justify-content:space-between instead.

Back tomorrow now :slight_smile:

2 Likes
3

Oh my goodness youre going to heaven. Thank you paul!!

  1. I actually should stop adding divs inside anchors since the reason I do it is because divs make me feel like things will work and i mainly picture my process like adobexd folders. I’m bad at explaining.

  2. it worked! but shouldn’t it still fill out the max-width even though its centered??

1 Like
4

No, if its centred it will be in the middle of the max-width :slight_smile:

You need justify-content :space-between to space things out (or justify-content:space-around if you want little gaps at each end)

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.