0

I am making a website and i found a cool navbar online that I am using but when I tried to move it to the right side of the screen using text-align: right; the text moves but the animated background doesn't (my website is a .php file if that helps)

here is the code:

* {
  margin: 0;
  padding: 0;
  font-family: Verdana;
}

nav {
  text-align: right;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #34495e;
  font-size: 0;
}

nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}

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

a:nth-child(1) {
  width: 100px;
}

a:nth-child(2) {
  width: 110px;
}

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

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

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

nav .start-home,
a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}

nav .start-about,
a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}

nav .start-blog,
a:nth-child(3):hover~.animation {
  width: 100px;
  left: 210px;
  background-color: #3498db;
}

nav .start-portefolio,
a:nth-child(4):hover~.animation {
  width: 160px;
  left: 310px;
  background-color: #9b59b6;
}

nav .start-contact,
a:nth-child(5):hover~.animation {
  width: 120px;
  left: 470px;
  background-color: #e67e22;
}
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>

I am new to HTML and CSS and I tried to use justify-items: right; and justify-content: right; but that wouldn't work either.

can anyone please help. Thanks

Tim R
  • 2,622
  • 1
  • 3
  • 19
Code
  • 16
  • 4
  • @Uwe thanks for the quick response, I tried adding `right: 0` to `nav .animation`(I think that is what you meant) but it didn't work – Code Aug 25 '23 at 23:11
  • You have to change for all the hover elements, the part `left` with `right` and exchange the values 1 with 5 --- and 2 with 4th child. And tweak it a little. --> https://jsfiddle.net/skLzacj4/1/ – Uwe Aug 25 '23 at 23:17
  • You have now to adjust width and so on, so it actually works properly. – Uwe Aug 25 '23 at 23:22

1 Answers1

2

if you use

nav {
  text-align       : right;

then you have to change all

a:nth-child(3):hover~.animation {
  left : ...

to

a:nth-child(3):hover~.animation {
  right : ...

code sample:

// bonus:
const 
  e_nav  = document.querySelector('nav')
, e_anim = e_nav.querySelector('div.animation')
  ;
e_nav.addEventListener('click', (e) =>
  {
  if (e.target.matches('nav > a'))
    {
    e_anim.className = 'animation start-' + e.target.textContent.toLowerCase();
    }  
  })
* {
  margin      : 0;
  padding     : 0;
  font-family : Verdana;
  }
nav {
  text-align       : right;
  position         : relative;
  width            : 100%;
  height           : 50px;
  background-color : #34495e;
  font-size        : 0;
  --a-width        : 120px;
  }
nav a {
  line-height     : 50px;
  height          : 100%;
  display         : inline-block;
  position        : relative;
  z-index         : 1;
  text-decoration : none;
  text-transform  : uppercase;
  text-align      : center;
  color           : white;
  cursor          : pointer;
  font-size       : 15px;
  width           : var(--a-width);
  }
nav .animation {
  position      : absolute;
  height        : 100%;
  width         : var(--a-width);
  top           : 0;
  z-index       : 0;
  transition    : all .5s ease 0s;
  border-radius : 8px;
  }
nav .start-home,
a:nth-child(1):hover~.animation {
  right            : calc( var(--a-width) * 4);
  background-color : #1abc9c;
  }
nav .start-about,
a:nth-child(2):hover~.animation {
  right            : calc( var(--a-width) * 3);
  background-color : #e74c3c;
  }
nav .start-blog,
a:nth-child(3):hover~.animation {
  right            : calc( var(--a-width) * 2);
  background-color  : #3498db;
  }
nav .start-portefolio,
a:nth-child(4):hover~.animation {
  right            : calc( var(--a-width) * 1);
  background-color : #9b59b6;
  }
nav .start-contact,
a:nth-child(5):hover~.animation {
  right            : 0;
  background-color : #e67e22;
  }
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Blog</a>
  <a href="#">Portefolio</a>
  <a href="#">Contact</a>
  <div class="animation start-home"></div>
</nav>
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
  • The bonus JS that creates an "active" state is cool in the demo, but I suppose it would have no purpose if the links go to another page. I suppose a use case would be with a fixed or sticky navbar with internal [text fragment](https://developer.mozilla.org/en-US/docs/Web/Text_fragments) links. – Tim R Aug 26 '23 at 04:03
  • could you help with that. I don't know how it works or how to add it to my code – Code Aug 26 '23 at 08:29
  • @Code this bonus is of course an example. it is based on the principle of event delegation of which there are multiple answers here, like this explanation: https://stackoverflow.com/questions/61741905/javascript-event-listener-for-all-buttons-in-table-event-delegation/61742025#61742025 – Mister Jojo Aug 26 '23 at 12:01
  • thx for your help, like I said I am new to html and css, and so could you give an answer or a link that explains how to make the navbar highlight the selected page even when the link changes? – Code Aug 26 '23 at 22:19
  • @Code Since you're using anchors, it made sense to think you had a single-page application. Otherwise, you have to use [`window.location.href;`](https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript) also search here [const currentUrl = new URL(window.location.href);](https://stackoverflow.com/questions/72499133/how-to-check-current-page-url-in-javascript) – Mister Jojo Aug 27 '23 at 06:39