Nav bar options been pushed to one side

useraKdm1 0
Viewed 30

just to preface I would say I'm rather new at coding, in particular, this is related to web coding. I am using HTML and CSS to code a website and I've created a navbar with animation upon hovering. I followed a tutorial to do so and edited the values accordingly to fit with my website. All was fine, I saved it and opened it again and it was working just fine. However I opened it up again today and all of the menu options have just been squashed to one side, though the animations still moved to the correct place when hovering over it. I had not edited any of the code and am unsure how to fix it.

I've tried to edit the position (left) of each menu item but it doesn't seem to be working.

Visualisation of the problem

here is the HTML coding for it:

<nav>
      <a href="#"> HOME</a>
      <a href="#"> ABOUT</a>
      <a href="#"> RECIPES</a>
      <a href="#"> GALLERY</a>
      <a href="#"> SUBSCRIBE</a>
    
      <div class="animation start-home"></div>
</nav>

And here is the CSS

nav {
    position: relative;
    width: 100%;
    height: 55px;
    background-color: white;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1)
}

nav a{
    font-family: dunbar-tall, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    text-transform: uppercase;
    color: #d79da8;
    text-decoration: none;
    line-height: 50px;
    position: relative;
    z-index: 1;
    /* display: inline-block; */
    text-align: center;

}

nav .animation {
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 0;
    background: whitesmoke;
    border-radius:8px;
    transition: all .5s ease 0s;
}

nav a:nth-child(1){
    width:120px
}

nav .start-home, a:nth-child(1):hover~.animation{
    width: 120px;
    left: 00;

}   
nav a:nth-child(2){
    width: 120px;
}
nav a:nth-child(2):hover~.animation{
    width: 150px;
    left:102px;
}

nav a:nth-child(3){
    width: 120px;
}

nav a:nth-child(3):hover~.animation{
    width: 140px;
    left: 230px;
}

nav a:nth-child(4){
    width: 120px;
}

nav a:nth-child(4):hover~.animation{
    width: 140px;
    left: 350px;
}

nav a:nth-child(5){
    float:right;
    margin-right: 40px;
}

nav a:nth-child(5):hover~.animation{
    width: 150px;
    left: 1290px;
}

a:hover{
    color: #c18392;
}

(Also I am aware the navbar doesn't navigate to anything yet)

Please help! And thank you in advance

navbar css html
1 Answers

nav:adding display:flex to put them in one line. putting gap:10px that is the gap between all the a tags. setting width to 100vw meaning 100% view-width . everything else is the same as you have added previously.

nav a:same as you have added.

nav a:nth-child(5) meaning the last of the a tag with subscribe. adding margin-left:auto meaning what ever space is left in the container put it to the last a tag's left. i hope it makes sense. hover:adding different bgcolor on hover. but you can do anything you want

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

nav {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100vw;
  height: 55px;
  background-color: white;
  border-radius: 8px;
  font-size: 0;
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
}

nav a {
  font-family: dunbar-tall, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 15px;
  text-transform: uppercase;
  color: #d79da8;
  text-decoration: none;
  line-height: 50px;
}

nav a:nth-child(5) {
  margin-left: auto;
}

a:hover {
  background-color: whitesmoke;
}
<nav>
  <a href="#"> HOME</a>
  <a href="#"> ABOUT</a>
  <a href="#"> RECIPES</a>
  <a href="#"> GALLERY</a>
  <a href="#"> SUBSCRIBE</a>

  <div class="animation start-home"></div>
  </nav

UmairFarooq0
Related