I have the following navbar:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navigationlinks" id="bs-example-navbar-collapse-1" style="">
<ul class="nav navbar-nav main-navi uppercase">
<li>About</li>
<li>Values</li>
<li>Team</li>
<li>Portofolio</li>
<li>Join</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I want to move the links some pixels on the right, so I tried margin-right:100px; but it doesnt work, Any idea why?
.navigationlinks{
margin-top: 10px;
margin-right:100px;
background:black;
opacity:0.6;
border-style:none;
}
Margin-top is working properly.
By Default,
ul has a padding-left: 40px,
Just give a style like,
ul
{
padding-left: 0;
}
As a part of suggestion,Just add a CSS reset before starting to develop.It can be found here,
http://meyerweb.com/eric/tools/css/reset/
Regards.
You can adjust padding to whatever you need:
li a{
padding-left :5px !important;
padding-right :5px !important;
}
Do you whish to have something like Demo or something else?
CSS
.navbar-nav>li {
margin-left:50px; /* use margin or padding values to make it move right/left accordingly */
/*padding-left:50px;*/
}
Related
Bootstrap newbie question. I am using a variation of ZimSystem's Left-Center-Right Aligned NavBars. I put my Brand on the left.
There are two seemingly related problems.
1) On large screens the fb-like button hangs off the right-hand side of the page.
2) On small screens, the Brand is moved down a couple lines so that the first menu item is concealed by it.
I have tried using absolute positioning in both cases, but that did not resolve the issue.
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
<li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>. </li>
<li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>. </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
</ul>
</div>
</nav>
CSS
#charset "UTF-8";
/* CSS Document */
html, body{
height:100%;
}
.navbar-default {
background-color:#72c5d5;
border-color: #284449;
z-index: 10;
opacity: 0.9;
}
.nav.navbar-nav.navbar-center li a {
color: #254053;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: #EF3927;
}
Here is the code I used for the fb like positioning that did not work.
#media all and (min-width:768){
.navbar-collapse fb-like{
position:absolute;
right:25;
Seems like this should be a pretty simple fix. But I am perplexed.
Here is the bootply.
Next time put it on jsfiddle.net
Replace your facebook div widget with this and it should do the trick. Your width was awkwardly set. So I changed it to 100% and it formatted properly.
<div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"
... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>
</div>
The problem with the navbar-brand spacing was resolved by moving its placement into div.
See comments below for clarification.
The spacing of the FB-Widget can also be resolved by setting the margins for navbar-right in custom CSS.
.navbar-right{
margin-top: 20px;
margin-right:20px;
}
To improve layout on small screens, move up navbar-brand as so:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
</div>
I am trying to get a navbar to show at the top of a webpage, have horizontal buttons inside of a clean box. Very similar look to the navbar found at http://www.apple.com/. I feel as if I should know how to do this, but apparently I do not. Any help is very appreciated, or even points and tips. Thank you and below is the code I have so far.
Css is shown first, and then my HTML.
body{
border: solid;
background-color: white;
color: black;
text-align: center;
}
table.slideshow{
}
th.slideshowtitle{
text-align: center;
}
footer{
border-top: solid 10px;
}
/*nav bar*/
.navbar-inverse {
background-color:black;
}
<!DOCTYPE html>
<html>
<head>
<link href="C:\Users\Chester Szydlowski\Desktop\HOF\stylesheet.css" type="text/css" rel= "stylesheet" />
<title>
Hall Of Framers
</title>
</head>
<body>
<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<u1 class="nav navbar-nav">
<li class="active">Home</li>
<li>Email List</li>
<li>Custom Frames</li>
<li>News</li>
<li>Silent Auction</li>
<li>Upcoming and Past Events<li>
<li>i dont know</li>
</u1>
</div>
</div>
</nav>
<p> Products </p>
</table>
</body>
If you add a display css selector to the "li" elements, it will do the trick
Add the following to your css.
li{
display:inline-block;
}
This will move the elements next to eachother, and you can style it further from there. Good luck
It looks like your nav is using boostrap classes. If so, just download and include boostrap.css.
height on the.navbarcontainer and since that is the menu not vertical anymore. display:inline-block didn't worked for me. There must be a solution without giving the menu a padding to fix it.
How do i get the menu vertical align into the .navbar container? Im using bootstrap as framework
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
Jsfiddle
.navbar{background-image: linear-gradient(90deg, #bed970, #54c1b5);background-size: 100% 4px;background-position: 0 0;background-repeat: no-repeat;-webkit-box-shadow: 0 0 4px #c8cacc;box-shadow: 0 0 4px #c8cacc;border: none;font-size: 14px;min-height: 70px;}
Assuming you want to keep your height of 70px the simplest solution is to change the line-height as per CodeRomeos comment above.
.navbar-brand, .navbar-nav li a {
line-height: 40px;
}
https://jsfiddle.net/hnyadr4s/1/
The issue seems to be that min-height is being set to 70px on the .nav element
if you add the following css
.navbar{min-height:inherit;}
then it should be ok
https://jsfiddle.net/ogvs98LL/
or you can add padding to the top if you want to keep the height
https://jsfiddle.net/pfjL9jy6/
I'm using the Boostrap's navbar, inside which there is an image brand (responsive) and some text (menu items). I would like to center the text within the div, but I don't know how: if I center the text in the CSS, there is more space between the left corner of the monitor and the "Home" and and less space between the last "Link" in the right and the right corner in the monitor. It's as if my code takes the div size, subtracts the image size and center the text in the remaining space.
I thought about putting a negative left margin, but because the image is responsive I don't know what value to give.
Can you help me?
http://jsfiddle.net/a001dxn6/2/
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="official_logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Specialità <span class="caret"></span>
<ul class="dropdown-menu">
<li>
</li>
<li>La pizza napoletana</li>
<li>Le specialità della casa</li>
</ul>
</li>
<li>Menu</li>
<li>Eventi</li>
<li>Gallery</li>
<li>Contatti</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
CSS
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-default {
background-color: transparent;
border-color: darkorange;
text-align: center;
}
.navbar-brand > img {
max-height: 100%;
max-width: 100%;
}
[fixed] Just add CSS: .navbar-brand { position: fixed; left: 1vw; }
can't really test with the fiddle, since there's no image.
have you tried removing text-aling: center from .navbar classes
and adding:
.dropdown, .dropdown-menu{
text-align: center;
}
? let me know if it works.
I want to locate the navbar to the right of the screen. It seemed trivial before I tried to do that.
Here is what I did:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
and in bootstrap.css I floated the navbar-brand to right:
.navbar-brand {
float: right;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
But it is still on the left! How to fix this?
Try this, its actually the .navbar-header that is floated left by default, so adding a float to .navbar-brand will not actually change anything.
.navbar-header {
float: right;
}
JsFiddle
Or adding the .navbar-right class to the .navbar-header would also work.
<div class="navbar-header navbar-right">