shift an element of nav bar to left most side
Question
I have the following Nav bar. I want to shift the Login/Register Component of it on the very left most of the nav bar but can't find a way to do it. What might be the possible solution, I have tried the padding-left:0 thing on the login li element but this does not seem to work. Any help in this would be appreciated
HTML:
body { margin: 0; background: #222; font-weight: 300; background-image: url('bg.jpeg'); } header { background: #d9c2ac; position: relative; } header::after { content: ''; display: table; clear: both; } nav { float: left; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 30px; position: relative; } nav ul li a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: bold; } nav a:hover {} nav a::before { content: ''; display: block; height: 5px; width: 0%; background-color: #444; transition: all ease-in-out 500ms; } nav a:hover::before { width: 100%; } form .form { float: right; } .search-bar { float: right; } ul li:last-child { position: absolute; right: 0; bottom: 0; margin: 15px; margin-bottom: 0px; padding: 0; }
<body> <header> <div class="container" id="#home"> <nav> <ul> <li id="login"> <a href="#login" style="text-align: left;"> Login/Register </a> </li> <li> <a href="#home"> Home </a></li> <li> <a href="#about"> About </a></li> <li> <a href="#"> Services </a></li> <li> <a href="#Products"> Products </a></li> <li> <a href="#contact"> Contact Us </a></li> <li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li> </ul> </nav> </div> </header>
3 answers
solution1
1 2018-02-15 05:29:04
solution2
1 2018-02-15 05:57:37
.navbar-tan { background-color:tan; }
<html> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <nav class="navbar navbar-expand-sm navbar-tan" > <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Login/Register</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Products</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Contact Us</a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <input type="text" name="" placeholder="Search" class="form-control"> </li> </ul> </nav>
solution3
0 2018-02-15 05:32:18
Try to make use of Flexbox here...and use margin utilities to align the first and last item...
...apply margin-right:auto to the first element to align it left most corner
...and apply margin-left:auto to the last element to align it right most corner..
I have also changed your some css and also removed all the float values. Also no need to use position:absolute here for the search-box.
Stack Snippet
body { margin: 0; background: #222; font-weight: 300; background-image: url('bg.jpeg'); } header { background: #d9c2ac; position: relative; } nav ul { margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 20px 0; } nav li { position: relative; margin: 0 10px; } nav ul li a { color: #444; text-decoration: none; text-transform: uppercase; font-size: 12px; font-family: verdana; } nav a:hover {} nav a::before { content: ''; display: block; height: 5px; width: 0%; background-color: #444; transition: all ease-in-out 500ms; } nav a:hover::before { width: 100%; } nav ul li:first-child { margin-right: auto; } nav ul li:last-child { margin-left: auto; }
<header> <div class="container" id="#home"> <nav> <ul> <li id="login"> <a href="#login" style="text-align: left;"> Login/Register </a> </li> <li> <a href="#home"> Home </a></li> <li> <a href="#about"> About </a></li> <li> <form class="form"> <input type="text" name="Search" placeholder="Search"> </form> </li> </ul> </nav> </div> </header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.