Navbar Help- How can I move it to have a central and right position
As you can see here the nav bar is central, with the icons on the right
13 Replies
Better picture
can you post some code please instead of a screenshot?
<nav className=" flex flexSpread ">
<ul className="flex gap-50">
<li>Home</li>
<li>My story</li>
<li>Work with me</li>
</ul>
<ul className="flex ">
<li>
<button>
<img src="/assets/Icons/Instagram.png" alt="Instagram Icon" />
</button>
</li>
<li>
<button>
<img src="/assets/Icons/Youtube.png" alt="Youtube Icon" />
</button>
</li>
<li>
<button>
<img src="/assets/Icons/SoundCloud.png" alt="Soundcloud Icon" />
</button>
</li>
</ul>
</nav>
This is my html, but i'm not able to get the results of the screenshot above (which is the design) I cant get the Words central and the icons to the right
.flexSpread {
justify-content: space-evenly;
align-items: center;
}
.flex {
display: flex;
}change
align-items: center; to align-items: flex-start; and let me know if that does what you're looking for
shoot, that's not right, sorry
alright i was close, I think what you want to change is to just remove "justify-content" entirely and that should keep everything centered, while having your social media icons move closer to your menu navigation, which sounds like what you're looking for? but it's hard to tell for sure what you actually want from the information you're providing
okay i see why i'm getting confused, are you trying to acheive what's in the screenshot, or is the screenshot what your website actually looks like right now in this moment?What i want to achieve
This is me RN
Okay, yeah, forget what I said before then lol
Give this a shot? I made a new class, and put it on the <ul> holding your icons. Let me know if this does what you're looking for.
Stayed the same
Hope this pic gives a clearer view of what I'm looking for, aswell
oh okay, yeah, that clears it up, i thought your issue was with the spacing between the icons because i didn't have the context of the thing underneath
let me set up a codepen real quick
Yeah mb, its about having the icons on the far right, while having the words- Home, my story, work with me, all in the center
Okay, I had to (very) loosely recreate what you already have.
https://codepen.io/TuxedoDemon/pen/YPyQxPe The relevant bits should be clear, I tried to mark the parts that are only there for presentation reasons, but if it's not clear what's going on, let me know