Html Question posted in
Some basic documentation can be found here.

Html – I need the site logo to sit to the side of a move with the nav bar but my codes not working whats missing?

I’m new to coding so the answer is probably obvious. I have all the items including the logo under however the logo hides behind the navigation bar no matter what I do. I’m trying to make the navigation bar and the logo move down the page as the user scrolls. As it sits that works but its just getting the logo inline with it all.

img {
    width: 80px;
    display: inline-flex;
}


ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #5c4033;
    position: fixed;
    top: 0;
    width: 100%
}



li {
    float: left;
}



li a {
    display: inline-flex;
    padding: 20px;
    text-align: center;
    padding: 14px 16ox;
    color: #ffffff;
    
  }



  li a:hover {
    background-color: #c4a484;
  }



nav { 
  display:inline-flex;
  z-index:1;
  position:fixed;
  top:25px;
  width:fit-content;
  height:44px;
  list-style-type:none;
}




 a:link { 
     text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}
<nav>
    <img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">
    <ul id="navItems">
        <li><a href="default.asp">Home</a></li>
        <li><a href="About.asp">About</a></li>
        <li><a href="Gallery.asp">Gallery</a></li>
        <li><a href="Contact.asp">Contact</a></li>
        <li><a href="Booking.asp">Booking</a></li>
    </ul>
</nav>

Half the css probably isn’t needed. but basically as it sits this code creates a navigation bar but the logo is hidden behind it. I tried deleting the img portion but that just makes the logo massive. Tried changing width on both images and nav but that either changed the size of the image or shortened the nav bar.

Tags:

2

Answers


  1. 0

    this is a standart nav bar based on your code

    .navbar-container {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #5c4033; 
  z-index: 10; 
}

img {
  width: 80px;
  height: auto;
  margin-right: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: calc(100% - 90px); 
  justify-content: space-around;
}

li {
  float: none; 
}

li a {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: #ffffff;
  text-align: center;
}

li a:hover {
  background-color: #c4a484;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}
    <nav>
  <div class="navbar-container">
    <img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">
    <ul id="navItems">
      <li><a href="default.asp">Home</a></li>
      <li><a href="About.asp">About</a></li>
      <li><a href="Gallery.asp">Gallery</a></li>
      <li><a href="Contact.asp">Contact</a></li>
      <li><a href="Booking.asp">Booking</a></li>
    </ul>
  </div>
</nav>
    Login or Signup to reply.
  2. 0

    You need just to arrange your style code you can try this :

    * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

nav {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 2rem;
    padding: 0.5rem;
    z-index: 1;
    position: fixed;
    height: 50px;
    background-color: #5c4033;
}

img {
    width: 80px;
    height: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

li a {
    display: inline-flex;
    padding: 10px;
    text-align: center;
    color: #ffffff;

}

li a:hover {
    background-color: #c4a484;
}

a:is(:link, :visited, :active, :hover) {
    text-decoration: none;
}

    HTML:

    <nav>
    <img src="Images/lilac-valley-logo.png" alt="Lilac Valley Logo">
    <ul id="navItems">
        <li><a href="default.asp">Home</a></li>
        <li><a href="About.asp">About</a></li>
        <li><a href="Gallery.asp">Gallery</a></li>
        <li><a href="Contact.asp">Contact</a></li>
        <li><a href="Booking.asp">Booking</a></li>
    </ul>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search