I'm trying to create a navbar with the two regions split with white space between. I've tried using float:right and justify-content: space-between, but I'm not sure why it is not doing anything. I would like for site-header-right to go on the right side and site-header-navbar to the left.
I did think of making margins between the two divs but that just seemed like an ugly fix, which may or may not cause responsiveness problems later. (If I'm wrong though about that, please tell me haha).
.site-header-navbar {
display: inline-block;
margin: auto;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li .sale {
color: #a62120;
}
.site-header-right {
display: inline-block;
margin: auto;
}
.small-container {
display: inline-block;
}
.search-btn {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
color: #555;
font-size: 12px;
line-height: 1.1;
letter-spacing: 1px;
font-weight: 500;
}
.site-header-right a {
display: inline-block;
margin-right: 20px;
}
.site-navigation {
display: flex;
}
<html>
<body>
<div class="site-header-masthead">
<div class="container">
<div class="row">
<div class="col-12 navbar">
<div class="menu-hamburger"></div>
<div class="toast-logo">
<img src="images/logo.jpeg" width="110px">
</div>
<div class="site-navigation">
<nav class="site-header-navbar">
<ul class="site-nav">
<li>Women</li>
<li>Men</li>
<li>House&Home</li>
<li>Sale</li>
<li>Events</li>
<li>Magazine</li>
<li>Our Approach</li>
</ul>
</nav>
<div class="site-header-right">
<div class="small-container">
<button class="search-btn">Search</button>
<a href="#" class="site-header-wishlist">
<span>Saved</span>
<span>(0)</span>
</a>
Account
<a href="#" class="site-header-cart">
<span>Bag</span>
<span>(0)</span>
</a>
</div>
</div>
</body>
</html>
Add justify-content: space-between; to your flex container (.site-navigation) to move the two child elements to the far left and right. And erase margin: auto; for the two flex items! All other offsets are due to margins (also default margins top and bottom), so you might want to reset these to 0.
.site-header-navbar {
display: inline-block;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li .sale {
color: #a62120;
}
.site-header-right {
display: inline-block;
}
.small-container {
display: inline-block;
}
.search-btn {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
color: #555;
font-size: 12px;
line-height: 1.1;
letter-spacing: 1px;
font-weight: 500;
}
.site-header-right a {
display: inline-block;
margin-right: 20px;
}
.site-navigation {
display: flex;
justify-content: space-between;
}
<div class="site-header-masthead">
<div class="container">
<div class="row">
<div class="col-12 navbar">
<div class="menu-hamburger"></div>
<div class="toast-logo">
<img src="images/logo.jpeg" width="110px">
</div>
<div class="site-navigation">
<nav class="site-header-navbar">
<ul class="site-nav">
<li>Women</li>
<li>Men</li>
<li>House&Home</li>
<li>Sale</li>
<li>Events</li>
<li>Magazine</li>
<li>Our Approach</li>
</ul>
</nav>
<div class="site-header-right">
<div class="small-container">
<button class="search-btn">Search</button>
<a href="#" class="site-header-wishlist">
<span>Saved</span>
<span>(0)</span>
</a>
Account
<a href="#" class="site-header-cart">
<span>Bag</span>
<span>(0)</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can use   between your navbars
 
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I know that this is probably asked many times already. I just want to center all items of my navbar vertically. I tried to set vertical-align: center; in my headercss tag.
I probably miss something:
<header>
<nav class="navbar">
<div class="branding">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </li>
</ul>
</div>
<div class="searchbox-container">
<input class="searchbar" type="text" placeholder="Search...">
<button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
</div>
</nav>
</header>
css:
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body{
font-family: sans-serif;
}
/* Navbar stuff */
header{
background-color: #424242/*#80aaff*/;
height: 60px;
}
.navbar{
width: 80%;
margin: auto;
}
.branding{
float: left;
}
.navbar-links{
float: right;
}
.navbar-links ul{
list-style: none;
}
.navbar-links ul li a{
text-decoration: none;
text-transform: uppercase;
color: white;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: sans-serif;
}
/* Navbar stuff */
header {
background-color: #424242/*#80aaff*/
;
height: 60px;
display: flex;
align-items: center;
}
.navbar {
width: 80%;
margin: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.branding {
margin-right:
}
.navbar-links {
margin-left: auto;
}
.navbar-links ul {
list-style: none;
}
.navbar-links ul li a {
text-decoration: none;
text-transform: uppercase;
color: white;
}
<header>
<nav class="navbar">
<div class="branding">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </li>
</ul>
<div>
<div class="searchbox-container">
<input class="searchbar" type="text" placeholder="Search...">
<button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
</div>
</div>
</div>
</nav>
</header>
I am trying to make a navbar using HTML and CSS but my CSS float: right and float: left statements aren't working, everything is still on the right side.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
padding: 15px;
overflow: hidden;
}
.nav-item {
color: black;
display: block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8 px;
text-transform: uppercase;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</div>
</div>
As was already mentioned in a comment you need to wrap your list items in a <ul> tag. This is both the correct syntax and will allow you to have the entire list of links go to the right.
I also added justify-content: space-between to tell flex to align items left/right, and display: inline-block to the nav-item for them to display in a single line, rather than stacked as block level elements.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
}
.nav-item {
color: black;
display: inline-block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8px;
text-transform: uppercase;
margin-left: auto;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<ul>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
You're almost good, please don't use float, instead you can use display: flex and use margin-left: auto to move things to the left.
.nav {
width: 100%;
text-align: center;
display: flex;
align-items: center;
overflow: hidden;
}
.nav-item {
color: black;
display: block;
list-style-type: none;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0px 8px;
text-transform: uppercase;
margin-left: auto;
}
<div class="header">
<div class="nav">
<img src="img/logo.png" class="logo" width=50 height=50>
<li class="nav-item">Download</li>
<li class="nav-item">Contact</li>
</div>
</div>
I am trying to increase the space in my inline list so that they are not stuck side by side. I have tried word spacing and adding padding to the header a links, but that hasn't worked. Also, I found the only way to make my list in order (shop, products, faq, blog) inline and floating in the centre is to put the list backwards. So when I do blog faq products shop it will show up in the order as shop, products, faq blog. I was wondering if there was a way to be able to write them in html in order and still have them display inline in order. Any help is appreciated, thanks! BTW I have
* {
padding: 0px;
margin: 0px
}
already
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .mid, .right {
float: left;
width: 33%;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Blog</li>
<li >FAQ</li>
<li >Products</li>
<li >Shop</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Try below updated snippet code
#header-flex {
display: flex;
position: fixed;
background: rgb(0,191,255);
height: 75px;
width: 100%;
}
header a {
display: inline-block;
float: right;
}
header li a:hover {
color: orange;
cursor: grabbing;
}
nav p a:hover {
color: orange;
cursor: grabbing;
}
.left, .right {
float: left;
width: 25%;
}
.mid {
float: left;
width: 50%;
}
.mid ul{
padding: 0;
text-align: center;
}
.mid ul li{
display: inline;
list-style-type: none;
}
.mid ul li a{
float: none;
padding: 0 6px;
}
<header>
<nav id="header-flex">
<div class="left">
<img src="logo.jpg" alt=logo width="30px" height="30px">
</div>
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
<div class="right">
<p>Sign In</p>
</div>
</nav>
</header>
Why don't you write like this if you need another order?
<div class="mid">
<ul>
<li >Shop</li>
<li >Products</li>
<li >FAQ</li>
<li >Blog</li>
</ul>
</div>
or there is something I didn`t get
and for horizontal space do this
.mid li {padding: 0px, 10px,0px,10px;}
I am trying to add a div between the header and footer. Both are flex boxes, however the div in between (which in the end needs to be a slider) does not get positioned well. I am trying to get the header on top and the slider to fill up the remaining space of the view height. Only on the scroll it should show the footer (and eventually other div's as well). Somehow I have the feeling flex box is not working correctly..
Basically the same effect as this website: ArsThanea.
Another problem that I have when opening the JSFiddle is that the header and footer do not take the complete width of the view box, although the div does. When running the html and css in the browser using Gulp / Jekyll it works and it takes up the complete width.
header {
height: 130px;
background: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
header .logo img {
height: 73px;
width: 146px;
padding-left: 60px;
}
header p {
text-transform: uppercase;
font-family: 'StratumNo1';
font-size: 14px;
margin: 0;
padding-left: 50px;
}
header .site-nav {
margin-left: auto;
}
header .site-nav ul {
list-style: none;
margin: 0;
}
header .site-nav ul li {
display: inline;
font-family: 'StratumNo1';
color: black;
margin: 10px;
text-transform: uppercase;
font-size: 14px;
}
header .site-nav ul li a {
text-decoration: none;
color: black;
}
header .site-nav ul li a:hover {
text-decoration: underline;
}
header .site-nav ul li a:first-child {
margin: 0px 10px 0 0;
}
header .search-form {
width: 300px;
height: 20px;
margin-left: 10px;
}
header .search-form .search-input {
width: 240px;
border-bottom: black 1px solid;
border-left: 0;
border-right: 0;
border-top: 0;
font-family: 'StratumNo1';
font-size: 14px;
}
header .search-form .search-input:focus {
outline: 0;
}
.footer-lockup {
height: 100px;
background-color: #1d1c1c;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.footer-lockup .copyright {
margin: 0;
color: white;
font-size: 14px;
font-family: 'Open Sans Light';
margin-left: 60px;
color: #4d4c4c;
width: auto;
}
.footer-lockup ul {
list-style: none;
margin-right: 60px;
padding: 0;
}
.footer-lockup ul li {
display: inline;
font-family: 'Open Sans Light';
font-size: 14px;
margin: 10px;
text-transform: uppercase;
}
.footer-lockup ul li:last-child {
margin-right: 0px;
}
.footer-lockup ul li a {
text-decoration: none;
color: #4d4c4c;
}
.social-logos {
position: relative;
min-width: 200px;
display: -ms-flexbox;
display: flex;
}
.social-logos .social-logo {
height: 20px;
min-width: 20px;
margin-right: 18px;
}
.social-logos .social-logo:last-child {
margin-right: 0;
}
.social-logos .social-logo .social-media {
text-align: center;
height: 20px;
cursor: pointer;
}
.social-logos .social-logo img {
height: 20px;
}
.social-logos .social-logo img.youtube {
height: 35px;
margin-top: -7px;
}
.projects-wrapper {
display: block;
background: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
<header>
<div class="logo">
<img src="/assets/img/YourLogo.svg" />
</div>
<p>Your Placeholder Text</p>
<nav class="site-nav">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</nav>
<form class="search-form">
<input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
</form>
</header>
<div class="projects-wrapper"></div>
<footer>
<div class="footer-lockup">
<p class="copyright">© 2016 “Your Company Name” All rights reserved</p>
<div class="social-logos">
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/behance-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/facebook-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/linkedin-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/twitter-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/youtube-icon.svg" class="youtube" />
</div>
</div>
</div>
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</footer>
DEMO: JSFiddle
Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :
position: absolute
you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.
Secondly, add a wrapper to your entire project body & Make that flex. like so
<div class="wrapper"> //this should be flex
<header>..</header> //this "could" be flex depending on its contents
<div class="projects-wrapper"></div>
<footer>...</footer> //this "could" be flex depending on its contents
</div>
let me know if you are facing any other problems
I made code for You, please have a look, and tell mi is it good for You.
fiddle
I use calc() to do that
Use 100vh to get the 100% view-port height and subtract the height of header and footer.
min-height: calc(100vh - 50px);
where 50px is the height of header+footer.
partial support for ie
I have a title and a menu and I want them to be in opposite corners of my webpage, kinda like this: http://www.google.com/drive
My website is http://www.vincestechsupport.com/home.html
I really appreciate any advice you can give. Thanks guys. Here is the code:
#Title {
font-size: 35px;
color: red;
font-family: arial;
float: left;
display: inline;
width: 100%;
font-variant: small-caps;
}
#Title a {
text-decoration: none;
color: red;
}
#Menu a {
text-decoration: none;
color: red;
width: 500px;
padding-left: 20px;
padding-right: 20px;
font-family: arial;
font-variant: small-caps;
}
#Menu {
font-size: 30px;
float: right;
display: inline;
font-family: arial;
width: 100%
}
#Menu ul {
list-style-type: none;
padding-left: 5px;
padding-right: 5px;
}
#Menu li {
display: inline;
}
<div id="Menu">
<center>
<ul>
<li><b>Home</b>
</li>
<li>Services
</li>
<li>Experience
</li>
<li>Pricing
</li>
<li>Contact Me
</li>
</ul>
</center>
</div>
<div id="Title">
<h1>
Vince’s Tech Support
</h1>
</div>
<div id="Home">
<h1>Home</h1>
</div>
After floating you should clear.
1.First method is adding "clearfix" class to <div id="wrapper"> - <div id="wrapper" class="clearfix">
and adding this style:
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
2.Second method is adding a height to <div id="wrapper">
3.And third method is adding width:100%; overflow: hidden; to <div id="wrapper">
You should choose but the best method is the first one with clearfix.