Two issues with Navbars

HTML-CSS
1

Hello all,

I am working on the Product Landing Page project and having two issues with my navbar:

  1. I can’t get the logo to display correctly in the upper left hand corner of the navbar.

  2. When attempting to include an h2 title below, it appears behind the navbar. This occurs despite my trying to set the navbar to display: block.

Here’s the HTML/CSS:

<head>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>

<div id="pagewrapper">
<header id="header">
  
  
  <nav id="navbar" class="navbar-default navbar-static-top">
    <ul>
      <li><img src="http://res.publicdomainfiles.com/pdf_view/82/13938365416588.png" alt="Public Domain Icon clip art" class="header-img image-responsive">
      <li><a href="" class="navlink">Request Demo</a></li>
      <li><a href="" class="navlink">Company Info</a></li>
      <li><a href="" class="navlink">Home</a></li>
    </ul>
    </nav>
  </header>
  </div>
<div>
  <h2>Global</h2>
</div>

.pagewrapper {
  position: relative;
}

.logo {
  width: 4%;
}

#navbar {
    position:absolute;
    top:0px;
    left:0px;
    width:100%; 
    background-color:#f26522;
    display: block;
}

.header-img {
  max-width: 40px;
  max-height: auto;
  float: left;
  display: flex;
  margin: 0px;
  padding: 0px;
}

ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navbar a {
  color: white;
  text-decoration: none;
  font-family: Oswald, sans serif;
  font-size: 110%;
}

header a {
  float: right;
  display: block;
  padding: 5px;
}

h2 {
  color: black;
}

Codepen Link: https://codepen.io/Datoufa/pen/OwjRxJ?editors=1100

Any help much appreciated!

Thanks.

3

Hello - regarding the h2 appearing behind the navbar, you can try adding a margin-top to the h2 in order to drop it down to wherever you like. On the logo image, there’s a couple things:

  1. Try removing the image out of the ul and li tags. Place it just inside the nav tag. Unless you want it to display in your list items, then you’ll probably have better success styling it if it’s not inside those ul and li tags.
  2. Then add a class to your img and style it with css giving it a little margins on the top and left.

Hope that helps! :slight_smile: If you need more help, I played around with your codepen and can show an example.

4

I believe Randell Dawson has it right: you’re using Bootstrap classes without referencing Bootstrap, either through the built-in options in Codepen or by importing in html or css. Start with that. You should try Grid, like I did. My page is still under construction and there’s a ton of bugs, but I think I’m getting there.

5

you need to add some margin-top to your h2 element. something like margin-top: 80px;

6

  1. I wanted the image to sit on the left side of the navbar and essentially mirror the position of the tabs on the right side of the navbar. I can mess around with positioning, but I thought I could get it to sit nicely with some use of the positioning property.

  2. I’ve heard bootstrap referenced before, but I didn’t realize I had to specifically call it out in codepen. It looks like there are various types. Is there a standard?

Thanks!

7

Thanks! I’ll check this out when I get home.

Also, I’d like to see what you did as a reference point.

8

No problem… First is your navbar:

<nav id="navbar" class="navbar-default navbar-static-top">
    <img id="header-img" src="http://res.publicdomainfiles.com/pdf_view/82/13938365416588.png" alt="Public Domain Icon clip art" class="header-img image-responsive">
    <ul>
      <li><a href="" class="navlink">Request Demo</a></li>
      <li><a href="" class="navlink">Company Info</a></li>
      <li><a href="" class="navlink">Home</a></li>
    </ul>
    </nav>

You’ll see here that I moved the image outside the ul and li tags. I added the ‘header-img’ id (which is required for the tests to pass). Next is your in your CSS:

#header-img {
  width: 4%;
  margin-top: 5px;
  margin-left: 5px;
}

I used the ‘header-img’ id to style your logo, just giving it some margins to center it in the navbar. Of course, if you want it to look differently, you can play around with it and decide the look you’re after :slight_smile:

I didn’t mess with your ‘.header-img’ class I saw in your CSS and I noticed your answer on using Bootstrap. I’ll address that here as their are a couple tricks I’ve learned that will save you some time and energy:

  1. It looks as though you have Bootstrap already added in the Settings panel in your Codepen. And it looks as though you are using bootstrap classes on your navbar, which will make it easier to have a responsive navbar.
  2. In order for the Bootstrap navbar to collapse properly, you’ll need to go to the Settings>JavaScript in your Codepen and add three things in this order: jQuery, Bootstrap, and Popper.js. These are necessary for your Bootstrap Navbar to work properly. I forked your Codepen and added these libraries so you can see.
  3. If you go for a Bootstrap navbar, you won’t need to use CSS Flexbox or anything else to style your navbar. You will need to use CSS to position your logo on the navbar and a ‘float: right’ on your header links.

Here’s the link to the forked Codepen so you can look at it all at once:

You can decide if you want this all to look differently, but hopefully this gives you a starting point and something to work with. If any of this doesn’t make sense, let me know and I’ll explain more. Have a good day!