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.
Related
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
I have some navigation links that I would like to align to the right and bottom of my header. The contents are
<ul class="nav navbar-nav navbar-right">
<li>My Subscriptions</li>
<li>Help</li>
<li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
</ul>
and the style I’m applying is
header ul {
float: right;
list-style: none;
margin-right: 15px;
vertical-align: text-bottom;
}
Although these line up to the right ok, they do not align to the bottom of the div — https://jsfiddle.net/cujz8tye/ . What am I missing?
Use CSS Flexbox. Updated Fiddle.
Wrap everything inside the container under .content-holder like:
<div class="content-holder">
<a id="logo" href="#">sample app</a>
<nav>
<ul class="nav navbar-nav navbar-right">
<li>My Subscriptions</li>
<li>Help</li>
<li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
</ul>
</nav>
</div>
Then, apply the CSS:
.content-holder {
display: flex;
height: 60px;
align-items: center;
}
nav {
flex: 1;
align-self: flex-end;
}
nav ul {
margin-top: 0;
margin-bottom: 0;
}
Have a look at the working snippet below:
header {
box-shadow: none;
background: #44505d;
border-bottom: none;
height: 73px;
}
#branding {
height: 60px;
position: fixed;
width: 100%;
top: 0;
z-index: 100001;
}
.content-holder {
display: flex;
height: 60px;
align-items: center;
}
#logo {
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
font-weight: bold;
}
nav {
flex: 1;
align-self: flex-end;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
header ul {
float: right;
list-style: none;
margin: 0 15px 0 0;
}
header ul li {
float: left;
margin-left: 15px;
}
body {
background: #eee;
padding-top: 73px;
line-height: 1.4;
font-family: "Karla", "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #333;
font-size: 14px;
margin: 0;
}
a, .clickable {
color: #53a3c2;
text-decoration: none;
}
<header id="branding" class="clearFix">
<div class="container clearFix">
<div class="content-holder">
<a id="logo" href="#">sample app</a>
<nav>
<ul class="nav navbar-nav navbar-right">
<li>My Subscriptions</li>
<li>Help</li>
<li><a rel="nofollow" data-method="delete" href="/logout">Log Out</a></li>
</ul>
</nav>
</div>
</div>
</header>
Hope this helps!
You can use Flexbox to align vertically items in a simpler way.
Here's an updated Fiddle
Relevant modifications: list isn't floating anymore and:
.container {
display: flex;
justify-content: space-between; /* The 2 flex items a#logo and nav will be aligned leftmost and rightmost */
height: 100%; /* flex container will occupy the full height of its parent (73px) */
}
.container > nav {
align-self: flex-end; /* this flex item (nav children of .container, not ul directly) will align itself vertically at the bottom. */
/* Because the flex container is by default flex-direction: row thus align-self is for the other axis, vertical */
}
edit: use Autoprefixer (if it isn't already the case) to be compatible with IE10+. It'll take care of adding for you the required prefixes for all 3 versions of the flexbox syntax ;)
Try using this code:
header {
height:40px;
line-height: 40px;
}
Replace 40px with the height of the header. This forces vertical-align to work in some cases.
I am new to programming and have been stuck for days trying to get my buttons to align horizontally in the center of their div. I have tried display: inline and display: inline-block and all the different solutions i have found on this forum and none have worked for me. Here is the css for the buttons:
div.contact {
padding: 0px;
margin: 0px;
background: #d6d6c2 url(https://clcadvisors.files.wordpress.com/2015/10/img_0914-0.jpg) no-repeat center;
background-size: cover;
height: 300px;
overflow: hidden;
}
ul.soc {
list-style-type: none;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
}
li.socbutton a {
background-color: gray;
border: 2px solid black;
border-radius: 10px;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 2px 2px black;
font-size: 24px;
margin: 20px;
padding: 20px;
box-shadow: 10px 10px 5px black;
width: 250px;
}
HTML:
<div class="contact">
<h3>Contact</h3>
<div>
<ul class="soc">
<li class="socbutton">
<i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN
</li>
<li class="socbutton">
<i class= "fa fa-twitter fa-fw"></i>TWITTER
</li>
<li class="socbutton">
<i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK
</li>
</ul>
</div>
</div>
and the link to the codepen that I am building it in http://codepen.io/SHENKU360/pen/VedRbP
Thanks in advance for any help!
Add this to your CSS:
ul.soc {
width: 100%;
text-align: center;
}
ul.soc li {
display: inline-block;
}
This will align all the stuff inside your "unsorted list"-element to center. This element will also need a 100% width.
All list-elements inside should be display: inline-block;.
You need to inline the lis, not the as:
li.socbutton {
display: inline-block;
}
And make the ul center them:
ul.soc {
display: block;
text-align: center;
}
Add the following code in your css
li{
overflow: hidden;
margin-left:auto;
margin-right:0px; }
this link is also helpfull https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/
So I've got my navbar set up pretty close to the way I'd like it to look, but for some reason it won't go to the center of my page. I've tried putting text-align: center; on most of the different elements that make up my nav bar, but it won't go no matter what I do. What am I doing wrong?
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
<div class="banner">
<h1>Brian Funderburke Photography & Design</h1>
<div class="nav">
<ul class="navbar">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Set the .banner width to 100% and then set .nav to center:
.banner{width: 100%;}
.nav{text-align: center;}
See fiddle: https://jsfiddle.net/c51kr3jo/
How I fix this problem usually is by following 3 steps:
Adding a full-width or a big width to the navbar container (.nav div in your case)
Adding a width to the navbar (usually try to find a width that will fit the most elements)
Adding margin: 0 auto to the navbar (this will center align the .navbar div)
Here is a jsfiddle I've created. Hope it helps.
I added
.nav {
display: flex;
justify-content: center;
}
Which I got from this AMAZING article.
http://jsfiddle.net/abalter/44w7b73f/
navbar center
.navbar {
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid #000;
border-width: 1.5px 0;
list-style: none;
height: 25px;
width: 1000px;
}
.navbar a {
text-decoration: none;
padding: 0;
margin: 10px;
border-bottom: 10px;
color: #000;
text-align: center;
}
li {
display: inline-block;
font-family: 'Muli', sans-serif;
font-size: 19px;
margin: 0;
padding: 0;
text-align: center;
}
/* center */
.nav1 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
}
.navbar1 {
-webkit-align-self: center;
align-self: center;
}
li a:hover {
color: red;
cursor: pointer;
}
/* || center */
<div class="nav1">
<h1>Brian Funderburke Photography & Design</h1>
</div>
<div class="nav nav1">
<ul class="navbar navbar1">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
Your code appears to already be working from what I can tell (though you were missing a closing </div> in your example). Make sure your CSS is being properly imported and applied.
Here is a working example to prove it is looking okay: http://jsfiddle.net/611mbvtu/
i have got a list which appears horizontal on my html.
but i would like the first 4 elements to appear in the middle of the screen with the same gap between them and then i want the last element in the list to be in the top right hand corner?
<ul id="navigationBarList">
<li>About</li>
<li>Bookings</li>
<li>Blog</li>
<li>Pricing</li>
<li>Sign In</li>
</ul>
everything I have tried has not worked so far. I assume it would be about giving an id or something to the individual items but that for some reason has zero effect
this is the css:
#navigationBarList{
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList li{
display: inline;
width: 100px;
margin-right: 20px;
}
It's not 'really' a menu item as such in this context. Use a different element outside of the menu which can then be positioned anyway you want.
#navigationBarList {
display: inline-block;
margin: 0;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
text-align: center;
}
#navigationBarList li {
display: inline-block;
width: 100px;
margin-right: 20px;
}
a {
text-decoration: none;
color: white;
}
nav {
position: relative;
}
#login {
position: absolute;
top: 0;
right: 0;
margin: 0.25em;
}
<nav>
<ul id="navigationBarList">
<li>About
</li>
<li>Bookings
</li>
<li>Blog
</li>
<li>Pricing
</li>
</ul>
<a id="login" href="#Sign In">Sign In</a>
</nav>
NOTE: - I should point out that you can still leave the #SignIn link as a list item if you so wish but, in that case, the parent ul should receive position:relative to achieve the same effect.
You could use a psuedo-selector for the last element
#navigationBarList li:last{ /* css */ }
Or give it an ID and style just that ID which will have more specificity
<li id="signin">Sign In</li>
#navigationBarList li#signin{ /* css */ }
You could do it like this. Using "margin: auto" to center align the text and adding an extra container.
I also assume you want the space between link text to be equal and not the whole width that each link spans.
#navigationBar{
display: block;
position:relative;
margin-right: 10px;
padding: 10px;
background-color: black;
font-size: 25px;
color: red;
width: 100%;
}
#navigationBarList{
display: block;
margin:auto;
width:600px;
}
#navigationBarList li{
display: inline;
margin-right: 20px;
margin-left:20px;
}
#navigationBarList li:last-child{
position:absolute;
right:20px;
}
<div id="navigationBar">
<ul id="navigationBarList">
<li>About</li>
<li>Bookings</li>
<li>Blog</li>
<li>Pricing</li>
<li>Sign In</li>
</ul>
</div>