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.
Related
I am in the process of building my website and I'm having an issue that I can't figure out how to fix! It's driving me mad!
I have a menu that animates in from the left hand side of the page and is fixed at width 100% and height 100%.
It works fine on on my laptop but when I view it on my iPhone the menu seems to 'zoom out' when the menu is activated.
If anyone could help me with this i would really appreciate it.
CSS
nav {
width:100%;
right:100%;
background:#111725;
overflow-x:scroll;
z-index:5;
height:100%;
}
JS
$("#menuToggle").click(function(){
$("#navToggle").toggleClass('active');
$("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
$("nav").toggleClass('navLeft');
$("nav ul li").toggleClass('fadeUp');
});
HTML
<div id="menuToggle"><a id="navToggle"><span></span></a>MENU</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>
</li>
Toggle .is-locked class on body on the click function. So, you jquery code would be.
$("#menuToggle").click(function(){
$('body').toggleClass('is-locked');
$("#navToggle").toggleClass('active');
$("main,header,.twitterToggle,.searchToggle").toggleClass('pushLeft');
$("nav").toggleClass('navLeft');
$("nav ul li").toggleClass('fadeUp');
});
And add the following CSS
.is-locked {
overflow-x: hidden;
}
Also remove overlow-x:scroll from nav.
I wrote the following code, including a div and a span. I want the span inside the div to have a different colour, but it doesnt seem to work.. This is the html code:
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
<br/>
</span>
</div>
In CSS I set the background color of the div 'menu' to a dark blue color, and the background color of the span 'decorationBox' to a lighter blue color. I also tried using a higher z-index to bring the span up to the front, but it wont display. Is it because of the span being inside the div?
You don't have any 'real' content in the <span>, therefore it won't (at least with default CSS settings) be displayed.
Setting display to block would make the width fit to the parent width:
→ jsFiddle
span#decorationBox {
background-color: red;
/* the default setting is "display: inline" for <span>s */
display: block;
}
Most of CSS properties does not work properly with span. Try to use a div instead.
It's because your span width is 0px. Place content in the span and you will see. With the br tag, you just have 18px on height in the span.
You can add property display:block; on span to see the difference.
The tag is used to group inline-elements in a document.
span is an inline tag by default, it doesn't have width or height properties, so if it is empty you cannot see it as bold or italic... You can change span to div or give block property in css:
.decorationBox {
display:block;
}
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
Content here.
</span>
</div>
Css
div.menu {
background-color: blue;
}
.menu #decorationBox {
background-color: red;
display: block;
}
OR
div.menu{background:blue;}
.menu span{background-color:red;}
Ex. http://jsfiddle.net/2NwmU/1/
ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:
nav bar background is a 1x64 pixel repeat-x. nav bar is actually a UL inline display. I want to have the background of each <li> tag be a static set image butted up next to each other for dynamic awesomeness. the problem: I cant force the background image to its full 100%. it is only as wide as the text is. The image size (made in photoshop) is 167x64 pixels. I cant center the links inside the <nav> tag horizontally and cannot get the <li> background the full size it's supposed to be. I've tried manually setting the height on everything in each level to be 64px as well as using verticle-align:middle; for the positioning I want and it's just really messing with my head #.#
site located at http://parnell.co/hurricane-church-of-god
page source:
<div class="nav-wrapper">
<!-- Nav -->
<nav>
<ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18">Home</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">Sample Page</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Blog</li>
</ul> </nav>
<!-- /Nav -->
<br class="clear">
</div>
<!-- /nav-wrapper -->
CSS Source:
/******************************************************
* Navigation *
******************************************************/
div.nav-wrapper {
margin-top:-16px;
-moz-border-radius: 15px;
border-radius: 15px;
background:url(img/nav-bg.png) repeat-x;
height:64px;
vertical-align:middle;
}
div.nav-wrappter ul,
nav ul li {
float:left;
height:64px;
vertical-align:middle;
}
nav ul#menu-nav-bar li {
display: inline;
list-style-type: none;
vertical-align:middle;
background-image:url(img/nav-button.png);
background-size:100%;
background-repeat:no-repeat;
height:64px;
}
nav ul#menu-nav-bar li a {
text-decoration:none;
height:64px;
vertical-align:middle;
}
Please bear with my sloppiness in code, i've been trying to wrap my head around it all day and have more or less started from scratch on that one part like 8 times. Any help you can give would be greatly appreciated
Ok, thanks to #ahillman3, I was able to get my mind straight and figure it out. Great link btw. As well the typo... that was about the biggest issue because nothing would have worked right until that was fixed. Specifying the width for the <li> tag forced the buttons to behave correctly. And as for centering the text, the css attribute display:block; when applied to nav ul#menu-nav-bar li a {} was the key to making the <a> tag (a line object) behave like a div or table (a block object). after that, it was as simple as adding some margin to get the text center in the box.
thanks guys!
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
}
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.