CODEWITHSUNDEEP
htmlcssnavbar
Webdesignerinclass
Webdesignerinclass

Reputation: 53

need help to center my navbar links, since adding searchbar on the right side. anyone?

i had my links nicely in the center under my logo now i added a searchbar and flaoted it at the right side cause i want it there only problem i got now is that i cant get my links centered anymore :-/ anyone knows a solution so i can still center my navbar links ?

                           /*Topnav*/
.topnav { 
    width: 100%; 
    opacity: 1;
    background-color: rgba(255,255,255,0.6);
    margin-bottom: 10px; 
    padding: 5px 0px 5px 0; 
	border-bottom: dotted #66A761;
	border-top: dotted #66A761;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;	
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color: #66A761;
}

.topnav input {
	float: right;
	padding: 3px;
	margin: 0 5px;
}
                           <!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
        <input type="text" placeholder="Search..">
	</ul>
	</nav>
</div>

Upvotes: 0

Views: 31

Answers (1)

Zhephard
Zhephard

Reputation: 360

Do the following change over css

    .topnav input {
      float: right;
      padding: 3px;
      margin: 0 5px;
      position: absolute; //input will hover on the navbar
      right: 20px; //this gives a bit of padding to the right
    }
    .topnav {
      width: 100%;
      opacity: 1;
      background-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 10px;
      padding: 5px 0px 5px 0;
      border-bottom: dotted #66A761;
      border-top: dotted #66A761;
      position:relative; //this allows the navbar to be the anchor to child elements with position absolute
    }

The nav buttons are not being centered as the position for the search bar was static, so if you set it as absolute it will float over your navbar. Notice that you have to change the navbar to position relative because you want the search bar to be anchored to that element.

HTML: 

<div class="topnav">
    <nav>
    <ul>
        <li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">varianten</a></li>
        <li><a href="aboutblank.html">contact</a></li>
        <li><a href="aboutblank.html">over ons</a></li>
        <input type="text" style="right:0" placeholder="Search..">
    </ul>
    </nav>
</div>

Upvotes: 1

Related Questions