unfortunately, I’ve tried to center my search bar but it keeps driving the other elements off the screen.
my preferred result:
unfortunately, I’ve tried to center my search bar but it keeps driving the other elements off the screen.
my preferred result:
Do you have the markup?
<nav>
<ul class="main-nav-links">
<li><a href="#">Browse</a></li>
<li><a href="#">Community</a></li>
</ul>
</nav>
<div class="buttons">
<a class="cta" href="#"> Sign Up</a>
<a class="cta2" href="#"> Log In</a>
</div>
<div class="album-trending">
</div>
The structure? like your html code
<nav>
<ul class="main-nav-links">
<li><a href="#">Browse</a></li>
<li><a href="#">Community</a></li>
</ul>
</nav>
<div class="buttons">
<a class="cta" href="#"> Sign Up</a>
<a class="cta2" href="#"> Log In</a>
</div>
Hello but where is the search bar
please check my code pen. it keeps disappearing when i post.
Looking through this now, first thing I’m seeing is the .main-nav-links css class has the margin-right 700px, that is forcing it to not be centered. I’m going to keep digging though.
HEY,
I did some cleaning but your code was kinda messy though but you can improve it more, i was just showing you a bit .
You just had to place all items in the navigation bar in the <nav>
tag
set to display:flex
, justify-content:space-around
and start targeting item containers
is my code better? I put them in the navs. I also need to put the first two links further left.
i have seen your code from the codepen but its kinda messy though , thats not how to get it done .
See this example.
<header>
<nav>
<div>
<ul>
<li><a href=".........">link1</a>
<li><a href=".........">link1</a>
</ul>
</div>
<div>
<a href="..........">link</a>
<a href="..........">link</a>
</div>
</nav>
</header>
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.