How do I make the navigation menu on my hero image be responsive

HTML & CSS
1

Good day y’all, one thing I learned from this forum is that for you to be a good web designer you must practice, practice and practice in front of computer.

So I have this portfolio web page I’m building for myself that has an hero image with some text on it. The hero image and everything on it is pretty responsive except the navigation… The navigation menu pushes the hero content downward when resizing down to mobile…

I threw in @media query to change the flex-direction to column at breakpoint but it still pushes the hero content downward… I tried resizing the fonts too, but it will be too small for mobile view… The link to the problem is below
https://codepen.io/Que0/pen/yLePKvx

2

The first question is what do you want it to look like at smaller widths?

You say ‘it pushes the content down’ which doesn’t seem like an issue to me but do you instead mean that you don’t want the menu to break to two lines?

I see you have removed the toggle so I assume you just want the 4 items across so you can do that with something like this:

@media screen and (max-width: 769px){
   .hero-nav{
    padding: 1rem;
    Justify-content:space-around;
  }
.hero-section-container .hero-nav a{
    font-size: 1.2rem;
    margin:1rem 0;
  padding:.5em 1em;
  }
  .active3 span{display:none;}
}

@media screen and (max-width: 470px){
.hero-section-container .hero-nav a{
    font-size: 1.1rem;
    margin:1rem 0;
  padding:.5em;
  }
}

I added a span around the word ‘US’ in the active3 nav item so that small screens just get 'CONTACT.

<a class="active3" href="#">Contact <span>Us</span></a>

This avoids the word wrapping and keeps it all on one line. The above changes will scale right down to 320px now. However they are a little tight and you may indeed want to implement a hamburger from about 420px and downwards.

Note that you probably want to decrease the vertical margins on your content so they move upwards on smaller screen but a better approach would have been to let flexbox automatically centre it in the available space. In that way the content will move depending on height available without magic margin numbers.

You have used height:100% on the container which means your page will never be bigger than a viewport. That’s a big mistake and you should use min-height instead as the page has to grow with content or text zoom. Avoid fixed heights on containers that hold text content.

Your box-sizing rules is incorrect as you have stated the property as the value. I think you meant box-sizing:border-box. However you would be better off using the more efficient and better targeted version as below.

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

I would avoid using this:

*{
    margin: 0;
    padding: 0;
}

That will break a lot of form elements. It’s fine for demos but heavy handed for a real site. Instead I suggest you set the default margin and padding that you need for the elements you use.

This has flexbox added for the main container to space out the content automatically.

/*  =======================
        Global style
    ======================= */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #eefbff;
  margin: 0;
  padding: 0;
}
/*  =======================
        L A Y O U T
    ======================= */
/* hero-section*/
.hero-section-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1d3d4d;
  background-image: url(/Images/landscape-photo-of-road-in-the-middle-of-mountains-696680.jpg);
  background-blend-mode: multiply;
  min-height: 100vh;
  background-position: center;
  background-size: cover;
}
.hero-nav {
  display: flex;
  justify-content: flex-end;
  padding: 1.5rem;
}

.hero-nav a {
  font-size: 1.8rem;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  margin: 2rem;
  font-weight: 500;
  letter-spacing: 2.4px;
}

.hero-nav a {
  border: 0.5px solid #ff9500;
  border-radius: 15px;
  padding: 0.5rem;
}

.hero-nav a:hover {
  color: #ff9500;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-top: 7rem;*/
  margin: auto 0;
}
.hero-content > h1 {
  font-size: 5rem;
  font-family: "Muli", sans-serif;
  color: white;
  padding: 1.2rem;
  border: 2px solid white;
  border-radius: 15px;
  font-weight: normal;
  margin: 1rem 0 2rem;
}
.hero-content h1 span {
  font-weight: bold;
  color: #ff9500;
}
.hero-content > p {
  font-size: 2.2rem;
  font-family: "Muli", sans-serif;
  color: white;
  margin: 1rem 1.5rem;
}
.hero-content > p span {
  color: #ff9500;
}
#tag-line {
  font-size: 1.9rem;
  font-family: "Muli", sans-serif;
  letter-spacing: 0.3rem;
  font-weight: lighter;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
}

@media screen and (max-width: 769px) {
  .hero-nav {
    padding: 1rem;
    justify-content: space-around;
  }
  .hero-nav a {
    font-size: 1.2rem;
    margin: 1rem 0;
    padding: 0.5em 1em;
  }
  .active3 span {
    display: none;
  }
}

@media screen and (max-width: 470px) {
  .hero-section-container .hero-nav a {
    font-size: 1.1rem;
    margin: 1rem 0;
    padding: 0.5em;
  }
}

I forked your pen and put back in place the hamburger toggle for smaller screens.

This was only a quick re-write so may have missed a few things but should give you some good clues :slight_smile:

1 Like
3

Thanks @PaulOB, this really helps a lot, but I have some few questions- why did you use the box-sizing property on * selector even though it’s been specified on the HTML (can you also shed more light on why pseudo-element is been added to the * selector).

ALSO If I want to set my PADDING and MARGIN properties to Zero, will you recommend I set it on the body rather than on the HTML?

4

Applying box-sizing to the html element only affects the html element. It would not affect any other elements on the page as box-sizing is not an inherited property by default.

I applied box-sizing on the html element but then I made sure that all elements will inherit box-sizing from their parent using the universal selector. This means that you can then use an element in your page using the default box-sizing (content-box) and all the children of that element will inherit the content-box value. If you did not inherit the box-sizing and instead used the universal selector version you would overwrite the children of the box that you wanted to use the different model.

You can read more about it here.

I also added in the pseudo elements because they get missed by the universal selector and would not use the same box model as the other elements.

The snippet I used is the preferred way of handling box-sizing these days so just copy it and save it for furher use :slight_smile:

1 Like
5

Historically, I would add it to both html and body but these days modern browsers seem happy with just the body element. Indeed modern browsers just seem to apply just margin and not padding to the body element.

Note that the margin and padding properties are not inherited so you would need to set/adjust the margins and padding on the elements you use.

6

@PaulOB for clarity sake, this is how I understood what you explained up there, please tell me if I’m wrong.

  • The universal selector will inherit HTML “box-sizing” property value “border-box/content-box” and apply it to all elements.

-This part of your explanation, did you mean I can still explicitly set a different “box-sizing” property on let’s say for example-- .div- container{ box-sizing: content-box} even though you already have the value set as “border-box” on the HTML and inherit it with the * selector… Thanks in advance.

7

Yes I think you’ve got it :slight_smile:

Imagine you have used the star selector to set border-box.

*{box-sizing:border-box}.

Now at some point in your page you add a third party component (or something you made earlier) where everything is based on the content-box model.

e.g. You have a div of stuff using the border-box:model but inside it you have some other stuff that is using the content-box model.

<div class="stuff">
  <h1>Stuff</h1>
  <p>My Stuff</p>
  <p>My Stuff</p>
  <p>My Stuff</p>

  <div class="other-stuff">
    <div class="more-stuff">
      <h2>Other Stuff</h2>
    </div>
  </div>

  <p>My Stuff</p>
  <p>My Stuff</p>
  <p>My Stuff</p>
</div>

In order for all the ‘other stuff’ to use the content-box model you would need to add extra rules to every element in that section because the universal selector would be setting all to the border-box model.

If we use the box-sizing snippet I gave you we only need to add box-sizing:content-box to .other-stuff. The universal selector is then telling all the children to inherit from the parent already so they automatically follow the parents declaration.

Basically the snippet I gave says inherit box-sizing from your parent. We set the html element to the border-box model which ensures all our page uses it unless we want another section using the content-box value and then we just need to add that property/value to the parent of that section.

It’s not a big issue either way as we could over-ride the universal selector on the inner elements with another universal selector but its best to limit your use of the universal selector because its so… universal :slight_smile:

1 Like
8

Thanks for taking your time to explaining this stuff, You are a good teacher!

2 Likes
10

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