I want the sign-up/log-in elements to be on the far right but it’s not working.
Since you’re trying to put these elements where the nav is, I would suggest putting the signup and login elements within nav you’ve got there. You could try putting them in their own ul as:
<ul>
<li><a href="">Sign up</a></li>
<li><a href="">Login</a></li>
</ul>
And then use flexbox to align these items on the right side of the nav while keeping the others on the left. Have a go experimenting with flexbox and properties such as, justify-self and align-self. Hope this helps!!
1 Like
I’ve tried it but it still doesn’t work. Please check my code
Hello peace!
I worked on your code a little, is this what you had in mind?
If yes, I can describe how you get there, I can’t post the full code as
we are advised not to post working solutions here, they get deleted!
1 Like
Is it possible to separate the links because I want to put a search bar n the middle.
It is, how familiar are you with CSS, do you know padding, position, text-style aso?
1 Like
I know about padding but I struggle with positioning items.
I can give you a structure you can work with.
Use divs, divs are our Ductape:
Html:
Create a navbar div as the main container,
within it create a div containing a link class,
within that create three divs: left (links), center (search) and right (links).
CSS:
.navbar
Add background color.
Add “inline-block” to your Logo so it doesn’t mess up the header.
try padding values to position it
.links
here’s where the flexbox goes in with space-between.
Let the class float right.
.left (links)
.center (searchbar)
.right (links)
Use padding values on all four sides for all three classes until you are happy with the position.
I hope it helps!
should i remove the header and replace it with the navbar?
If you plan to add nothing else to header container like a background picture, you can remove it.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.