I think the best would be I provide the website link which is : www.youthlife.de
I am trying to position the little brand logo closer to the navbar without changing the position of the navbar itself.
If I put a margin-left to the brand, the navbar moves as well. I don't get why. What regulates the distance between the brand and the navigation bar?
I don't know what size of height and width of your logo.
Here's what I have tried.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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> <a class="navbar-brand" href="#"><img src=""/>
Start Bootstrap</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> About
</li>
<li> Services
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</nav>
This is the CSS:
.navbar-brand img {
width:90px;
height:25px;
display:inline-block;
margin-top:-3px;
}
You can check the demo HERE.
Now, let me know further if it is not what you wish.
Hint: Pls provide some codes to see what's been wrong with it.
Related
I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<button type="button" class="navbar-toggle collapsed" 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>Home</li>
<li>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
I have spent already several hours trying to correctly position several elements in a fixed bootstrap navbar, but I do not manage to have exactly what I would like. This is what I have so far:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
<p class="navbar-text">title of the page</p>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
<li></span></li>
</ul>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><span id="audioInPause" class="glyphicon glyphicon-play"></span></li>
</ul>
</div>
</div>
</nav>
The problems I have are the following:
I would like to position the "title of the page" element in the middle of the screen, but it always stays in the left, next to the brand.
The audioControl item should be independent of the other icons in the right side (i.e. it should not collapse when the viewport becomes too small. I achieved the "not collapsing" part, but when the icons collapse I get a) the play button always goes in a second row, b) clicking on the collapsed button activates the play button, instead of opening the menu to select one of the collapsed items.
I created a jsfiddle at https://jsfiddle.net/cwx1wvo7
I can answer the first one quickly, but I don't know if it will work with collapse, you can play around.
I agree with the comment above about by MattD. As a twist, partition your nav using col-lg-xx col-md-xx etc then use text-center
As an example to give you and idea,
<div class="navbar-header pull-left col-lg-10 col-md-9">
<a class="navbar-brand" href="http://www.aprentiko.com">brand
<p class="text-center navbar-text">title of the page</p>
</a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">
in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements.
the ms-md-auto move ur elements to the right:
.ms-md-auto {
margin-left: auto !important;
}
<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >
I am trying to add a Twitter logo to my header (I use Bootstrap CSS) but it's screwing up the alignment. I was trying to put them side by side, but instead it shoved them beneath. Here was my first attempt:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">#Cardshifter</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
This is how it renders:
This was my second attempt using <div> instead of <ul>:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="nav navbar-nav">
<img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">
</div>
<div>
#Cardshifter</li>
</div>
</div><!--/.nav-collapse -->
</nav>
That seems like a slight improvement, as in they are separate elements (note the light blue contour on the right only appears in my Brackets live preview, not on the actual rendition):
I have tinkered around with CSS margin and padding on both the <ul> and <div> versions with no apparent improvement. If you wish to see the code in context, it is currently hosted on Github until a solution is found. The desired layout is side by side:
[Cardshifter] | [Twitter logo] | [#Cardshifter]
You can do simple alignment of list-items with a … list!
HTML:
<ul class="navbar">
<li>
Twitter logo here
</li>
<li>
Twitter handle here
</li>
</ul>
CSS:
.navbar {
/* Just a little housekeeping … */
list-style: none;
margin: 0;
}
.navbar > li {
display: inline-block;
}
#kleinfreund got the correct solution, however a bug was pointed out as a comment to the question, which (combined with the accepted answer) completely fix the problem:
correct answer is below, also what up with the percentage inline
widths on the image? That's a whole lotta bad going on there. Dump the
inline styles, don't use percentages for widths on a bitmap image, use
the exact pixel size and use the HTML height and width attributes. –
Matt Lambert 3 hours ago
So I changed the code to this and it work completely:
<div id="navbar" class="collapse navbar-collapse">
<ul class="csh-twitter nav navbar-nav">
<li>
<img src="images/logos/Twitter_logo_blue.png" style="height: 25px; width: 30px; margin-top: 10px;">
</li>
<li>
#Cardshifter
</li>
</ul>
</div><!--/.nav-collapse -->
Rendering:
I'm trying to create a webpage using bootstrap3 but have run into a problem in the navigation bar. I want the navigation links (there are 4 - "Web Design" "Development" "Photography" "Blog") to equally divide the space available in the horizontal navbar. At the min they are just piling up on the left. Here is a segment of the code - hopefully I haven't missed out an important bit. I have NOT amended the bootstrap CSS at all.
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<nav class="navbar navbar-default" role="navigation">
<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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active col-md-3">
Web Design
</li>
<li class="col-md-3">
Development
</li>
<li class="col-md-3">
Photography
</li>
<li class="col-md-3">
Blog
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<h1>Hello World!</h1>
</div>
</div>
</div>
</div>
I forced a few changes in the bootstrap layout with a couple of css rules, see if this doesn't float your boat :)
http://jsbin.com/xeniwonujeti/1/
my css changes:
.nav { width: 100%;}
.nav li { width: 25%; text-align: center; }
Obviously this will limit dynamic menu changes and you'll have to change it if the amount of links changes.
I'm using a nav-bar from Bootstrap (http://twitter.github.io/bootstrap/components.html#navbar) apart from the links for different tabs which are on the left side of this nav-bar, I want to put my notification icons on the very right of it. How can I do this with CSS? I dont want to use pixels, I rather have it flexible with the size of window and go to the right of this nav-bar.
thanks
Just use two different UL like on the following code :
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li>THREE</li>
<li>LEFT</li>
<li>ITEMS</li>
</ul>
<ul class="nav pull-right">
<li>RIGHT</li>
<li>ITEMS</li>
</ul>
</div>
</div>
</div>
</div>
Link to a bootply : http://bootply.com/69056