Is there a way to make a twitter bootstrap navbar only as wide the menu items that are shown on it? My navbar has only 4 items by default, and 5 when the user is logged in, but the navbar is way too wide. I've tried changing the span, but that messes up the alignment and the navbar is no longer properly centralized. Could anyone help? Thanks!
Alternatively, I would also appreciate it if I somebody could help me just make the navbar fixed width, but without misaligning it and keeping it centralized.
This is my code for navbar:
<div id="top" class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>Used books exchange</li>
<li>Submit a listing</li>
<li>My account</li>
<?php if (!empty($_SESSION["id"]))
{
print('<li>Log out</li>');
} ?>
</ul>
</div>
</div>
If I understand you correctly, i think this is what you are looking for.:
.container {
text-align: center;
}
.navbar {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
It makes the navbar only as wide as its content, centered, and does reasonably well when you resize it.
Here is a Jsfiddle of it:
http://jsfiddle.net/hajpoj/9E7QX/
You could give it a margin-right;
.navbar {
margin-right:200px; //whatever px you need
}
Related
Hello Fellow Programmers
I would like to center the navigation and have researched and don't know the code to insert to my custom made theme which I converted from HTML to Wordpress. (I'm a little new to Wordpress Theme Development)
My Custom-made wordpress theme already pulls whatever menu is on wordpress and inserts it in.
But I just need help centering the menu. observe the picture below... The menu is too far to the left.
Here is some relevant code I have currently on the website in my "header.php" which displays the WordPress menu.
(Header.php File)
<nav class="menubar">
<ul id="menu">
<?php wp_nav_menu();?>
</nav>
Image of my navigation menu which appears more on the left side.
P.S. Please help me with simply centering my menu, your response(s) is(are) most appreciated.
.menubar, #menu {
width:100%;
}
#menu {
text-alighn:center;
padding:0;
margin:0;
}
Or you could also wrap the navbar in a wrapper div and give it the same width as the main content of the site(this may or may not be what you're looking for).
<div class="nav-wrapper">
<nav class="menubar">
<ul id="menu">
<?php wp_nav_menu();?>
</nav></div>
.nav-wrapper{
max-width: 1170px; /* let's say this is the width of the main div */
display: block;
margin: 0 auto;
}
How can I center the navbar on this page, while still keeping the background gradient? I've seen some tricks where the li is set to display inline, the a to display inline-block, and the ul to align the text in the center, but these require me to add float:none to the code, which breaks my background gradient. Could someone please shed some light?
Add two classes in markup (with optional names, just to override CSS). Lets call it .nav-container and .menu-nav.
<div class="navbar-inner">
<div class="container nav-container">
<ul class="nav menu-nav">
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
and then add in CSS
.nav-container {
text-align: center;
}
.menu-nav {
float: none;
}
I've changed that in my Chrome inspector, and background gradient looks same as before that.
I try to use bootstrap affix (2.1.0) in one of my mvc4 project.
It seems that .span3 and .span9 doesn't work properly if, after scrolling 50px, the .span9 content move to the left.
I found this: Text moves to side of the page on scroll down but is not working. Adding floats to spans works somehow but is not "responsive". I think it must be a better solution.
Does anybody make it work ?
Here is my code (copy & paste from bootstrap site). Where I did wrong ?
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
....
<div class="row">
<div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="50">
<ul class="nav nav-list bs-docs-sidenav">
<li><i class="icon-chevron-right"></i> Download</li>
....
<li><i class="icon-chevron-right"></i> What next?</li>
</ul>
</div>
<div class="span9">
....
<section id="download-bootstrap">
Problem solved. Once I affixed the unordered list, everything working fine. Somehow I understood that I have to affix the parent div, not the list itself. My mistake.
another way to fix this is to set the nav span min-height
.span3 {
min-height: 1px;
}
also I needed to set the nav to not affix when in tablet mode:
#media (max-width: 767px) {
.sidenav.affix {
position: static;
There really isn't enough in the docs at the moment explaining how to get this to work.
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.