I realize that this question was asked before by different posters, but I tried a lot of suggested answers and none of them seemed to work.
When inputting my logo into the NavBar, it keeps expanding. However, the <li class="logo"> slot is reserved in the navbar, as the left class does leave room, but only as much as their designated 8% width not 40%.
ul.navbar {
width: 100%;
height: 50px;
line-height: 50px;
list-style-type: none;
padding: 0;
background-color: #5D6576;
opacity: 0.8;
border: none;
}
li.logo {
float: left;
width: 40%;
}
li.left {
float: left;
color: white;
width: 8%;
}
li.left a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: #BC80BB;
transition: 1s;
}
li.right {
float: right;
width: 4%;
}
<ul class="navbar">
<li class="logo"><img src="static/logo.png" alt="Logo"></li>
<li class="left">Home</li>
<li class="left">*** Website</li>
<li class="right"><i class="fa fa-fw fa-envelope"></i></li>
<li class="right"><i class="fa fa-fw fa-phone"></i></li>
</ul>
Extremely expanding logo:
Showing the reserved spot:
Here i am sending you code as well as link. Please check it. If any changes then let me know.
https://jsfiddle.net/np6tzxyd/16/
.header-menu {
display: flex;
background-color: #5D6576;
opacity: 0.8;
width: 100%;
height: 50px;
line-height: 50px;
align-items: center;
justify-content: space-between;
}
.navbar-left,
.navbar-right {
display: flex;
list-style-type: none;
padding: 0;
border: none;
}
.navbar-left li,
.navbar-right li {
padding-right: 15px
}
.navbar-left li a:hover,
.navbar-right li a:hover {
color: #fff;
}
.logo {
display: block;
padding-right: 20px;
}
.logo-menu{
display: flex;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="header-menu">
<div class="logo-menu">
<a class="logo"><img src="static/logo.png" alt="Logo"></a>
<ul class="navbar-left">
<li>Home</li>
<li>*** Website</li>
</ul>
</div>
<ul class="navbar-right">
<li><i class="fa fa-fw fa-envelope"></i></li>
<li><i class="fa fa-fw fa-phone"></i></li>
</ul>
</div>
Following #Revti Shah answer to prevent jumping outside the nav you need to add this
overflow: hidden;
in your code
ul.navbar
or in her code
header-menu
Related
I can't seem to find a great way of sizing my logo to fit within the header, I am trying to get a result with the logo on the left side of the header and the naviagtion on the right side. I've tried this and it seems to work but I don't know if there's a better way to approach this. If anyone could give some tips it would be greatly appreciated.
My CSS and HTML
a {
text-align: center;
color: #232323;
text-decoration: none;
transition: .1s;
}
button {
border: none;
outline: none;
color: #f3f3f3;
cursor: pointer;
transition: .3s;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
top: 0;
padding: 1em 2em;
max-height: 20%;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.logo-wrapper {
display: inline-block;
overflow: hidden;
}
.logo-wrapper img {
height: auto;
width: auto;
max-width: 150px;
}
nav {
display: inline-block;
}
.nav-item {
display: inline-block;
margin: 0 1.5em;
}
.get-started {
background-color: #f27649;
padding: 1em 2em;
border-radius: 3em;
}
.get-started:hover {
filter: brightness(85%);
}
<header>
<div class="logo-wrapper">
<a href="/">
<img src="images/devchat.png" alt="DevTalk Logo">
</a>
</div>
<nav>
<ul>
<li class="nav-item">Learning</li>
<li class="nav-item">About</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Explore</li>
<li class="nav-item">Contact</li>
<li class="nav-item">Login</li>
<li class="nav-item"><button class="get-started" href="#">Get Started <i class="fas fa-angle-right"></i></button></li>
</ul>
</nav>
</header>
I am trying to create a header bar with logo on the right, horizontal navigation on the left as usual. I need navigation items to be centered to the logo vertically.
I have tried several methods. I would appreciate if someone could show me the way around and explain why it worked, and what I was probably missing.
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Thank you very much!
I suppose you want to align the navigation to the bottom end of the logo? If yes, you can use display:flex with the following settings on the parent element of both:
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Alternatives: If you want to center-align them vertically, change align-items: to center; (or to top for top alignment)
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
This uses display:flex to set items in a line.
If you need to use browsers that do not support display:flex (I think IE<9) and you want a different way, let me know.
Open sans included because I like how it looks.
Orange used to demonstrate the middle-ness of the elements.
This will work if you know the height of the logo. If it is unknown, or perhaps changes height (a lot of places have navbars that shrink down a bit once the page scrolls) you may need a different solution.
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
.nav {
display: flex;
background-color: orange;
margin: 0;
padding: 0;
height: 50px;
font-family: "Open Sans";
font-weight: bold;
justify-content: space-between;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-block;
padding: 5px 10px;
box-sizing: border-box;
line-height: 40px;
font-size: 20px;
}
.menu ul li:first-child {
margin-left: 10px;
}
.menu ul li a {
text-decoration: none;
}
<div class="nav group">
<div class="logo"><img src="//placehold.it/200x50" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Thoughts</li>
<li>Contact</li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Tried to google this but didn't find anything that helped me.
So I have button-text on the left and right but I want to center an image inside the top bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li><a class="image" href="#"><img src="https://dummyimage.com/150X38/000/fff"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>
so what I basicly want is the image (class="image") to be centered, but the rest as it is.
Thanks alot!
Do it like this
Remove image class from a tag and give image class to it's parent li and try this with this example. it will helps you
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
text-align: center;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #3744a2;
}
li.image {
float: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>home</li>
<li>news</li>
<li>services</li>
<li><a class="active" href="#">prices</a></li>
<li>contat</li>
<li class='image'><a class="" href="#"><img src="../image/image.png"></a></li>
<li style="float:right"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</li>
<li style="float:right"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</li>
</ul>
a.image {
display: block;
margin-left: auto;
margin-right: auto
}
try adding that code in your css file . Also try have a look here
it has more info about centering things .
I used display:flex and flex property. by setting display: flex:0 I'm telling the browser I want this element take just the place he need, and with flex:1 on a single element I'm telling that I want it to take all the possible place
div.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
display: flex;
}
div.left-part, div.right-part {
flex: 0;
display:inline-block;
white-space: nowrap;
}
div.center-part {
flex: 1;
text-align: center;
}
div.nav-button {
display:inline-block;
}
div.nav-button a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
div.nav-button a:hover:not(.active) {
background-color: #ddd;
}
div.nav-button a.active {
color: white;
background-color: #3744a2;
}
<div class="nav">
<div class="left-part"><div class="nav-button">home</div>
<div class="nav-button">news</div>
<div class="nav-button">services</div>
<div class="nav-button"><a class="active" href="#">prices</a></div>
<div class="nav-button">contat</div>
</div>
<div class="center-part">
<div class="nav-button"><a class="image" href="#"><img src="../image/image.png"></a></div>
</div>
<div class="right-part">
<div class="nav-button"><i class="fa fa-envelope" aria-hidden="true"></i> enter#email.here</div>
<div class="nav-button"><i class="fa fa-phone" aria-hidden="true"></i> 123 123 123</div>
</div>
</div>
I want to make a fixed navbar at the bottom of the viewport with two sections. On the left, links for the rest of the site, and on the right, links to outside sources. I want to have everything both horizontally and vertically centered and to be responsive. For every solution I've tried, the height, alignment or size of the navbar is slightly off.
If I set the content div to 90% and the navbar div to 10%, then it "works" and things are aligned correctly, but I want the navbar to be slightly thinner.
As you can see with the border I styled the nav div with, its basically floating, and I have no idea why.
I've seen some similar questions, but a lot of the answers seem to point to outdated solutions using floats, etc.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
}
.main-content {
height: 90%;
max-width: 70%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
height: 5%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 10vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<title>Alex Wilson - Man, Web Designer, Legend</title>
</head>
<body>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
</div>
</body>
Here's a CodePen.
So I did a few things to your code:
Made your page element a flexbox too:
.page {
height: 100%;
display: flex;
flex-direction: column;
}
And removed the heights for the main-content and nav, and the max-width for the main-content(better to set it in pixels according to content rather than percentages I guess).
For making the navbar slightly thinner perhaps you can reduce the line-height for the nav-left or nav-right.
Also added flex: 0 0 auto so that the the nav doesn't shrink too much when the height of the viewport is small (because line-height of nav is in viewport pixels).
See demo below:
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
}
.main-content {
/*height: 90%;*/
/*max-width: 70%;*/
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.main-left {
text-align: center;
padding: 20px;
}
.nav {
border: 1px solid blue;
/*height: 10%;*/
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto; /* addded */
}
.nav-left {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav-right {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
font-size: 3vh;
line-height: 5vh;
}
.nav ul {
padding: 0;
margin: 0;
display: inline-block;
}
.nav li {
display: inline-block;
text-align: center;
}
.nav a {
color: black;
}
.nav a:link {
text-decoration: none;
}
.nav a:visited {
text-decoration: none;
}
.nav a:hover {
text-decoration: none;
color: gray;
}
.nav a:active {
text-decoration: none;
}
img {
border-radius: 50%;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script src="https://use.fontawesome.com/383177a704.js"></script>
<div class="page">
<div class="main-content">
<div class="main-left">
<img src="http://i.imgur.com/IMIKhWA.jpg"></img>
</div>
<div class="main-right">
<h1>About me</h1>
<p>These are words about how awesome I am. I'm pretty much the best. Scratch that, I am the best. Everything I say is right and everything I do is great. My friends love me and my enemies want to be me. People can't imagine any way I could possibly
be improved. I'm a shining example of humanity and more specifically, manhood. I'm the pinnacle of excellence. I piss glory and shit greatness. You mad? Get at me. Get rekt.</p>
</div>
</div>
<div class="nav">
<div class="nav-left">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Work
</li>
</ul>
</div>
<div class="nav-right">
<ul class="list-right">
<li><i class="fa fa-linkedin" aria-hidden="true"></i>
</li>
<li><i class="fa fa-github" aria-hidden="true"></i>
</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i>
</li>
<li><i class="fa fa-facebook" aria-hidden="true"></i>
</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>
</li>
</ul>
</div>
</div>
I have tried many solutions on SO and none of them seem to work. I have tried many different methods of getting navbar-right to work but to no avail.
"Login" should be on the right.
Here is my nav:
<div class="navbar-header">
<a href="#" class="logo">
<img alt="Brand" src="img/logo.png">
</a>
</div>
<ul class="nav navbar-nav main-nav">
<li>Coin Flip</li>
<li>Deposit</li>
<li>Support</li>
<li>FAQ</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-steam" aria-hidden="true"></i></li>
</ul>
<div class="right">
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
And the relevant css:
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
}
.navbar a {
text-transform: uppercase;
font-weight: bold;
color: #BDC0C5 !important;
word-wrap: none;
font-style: italic;
font-size: 15px;
padding: 0 !important;
transition: 0.5s all;
align-self: center;
padding-right: 30px !important;
}
.navbar a .fa {
font-size: 20px;
}
.navbar a:hover {
color: #4c7ba3 !important;
text-decoration: none;
}
.right {
float: right;
}
.main-nav {
padding-left: 30px;
display: flex;
align-content: center;
justify-content: center;
}
I have tried multiple positions, displays, etc. I think the issue might be in the flex box? When I added a container around the uls, it pulled right but also broke my flex box centering.
Thanks!
JSFiddle: https://jsfiddle.net/ga3rcg0w/ (Make sure to expand the web view)
Try this : Using Inspect Element on your browser.
<ul class="nav navbar-nav navbar-right" style="float:right">
<li>Login</li>
</ul>
Lets try to make the .navbar position to relative, and some change and add code for right class.
And the code looks :
.navbar {
background-color: #0C1322;
box-shadow: none;
z-index: 1000;
border: 0;
height: 70px;
border-bottom: inset 1px #2F394E;
display: flex;
align-items: center;
padding-left: 25px;
position:relative; /* <-- Add This */
}
/* New Style */
.right {
position:absolute;
top:0;
right:0;
}
.right ul {
margin-right:10px;
}
It should work like what you expected :)
I was able to get it to work with this.
.right {
margin-left: auto;
margin-right: 25px;
}
Float does not work due to the flex box.