I am using a template based off of Twitter Bootstrap for a site I'm building (here's the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I'm using. I am just not sure exactly why this is a problem. I've looked around, but can't seem to find a solution to this.
Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?
sigh... Sorry, first time using Bootstrap, obviously... :/
For Centering logo, implement this css code to the referred class...
.container { position:relative; }
.brand { text-align: center; width: 97%;}
.navbar .btn-navbar {
display: block;
position: absolute;
right: 0;
}
For Centering, the nav links,
.nav-collapse .nav > li > a {
margin: 12px 0 !important;
text-align: center;
}
And for the drop-down overlay issue, add this,
.nav-collapse { padding-top: 1em; }
Related
I am having some trouble with my navbar on this site. The navbar is going below where it should be. As I see it there is 2 problems.
1: There is to much width between the menu. When I remove a menu option, the menu is aligning fine.
2
I had to set this CSS on the following line of HTML, because the logo was not clickable. If I remove the inline-block the menu is aligning perfect, but then the logo is not clickable.
<nav id="wp-megamenu-primary_navigation" class="wp-megamenu-wrap">
#wp-megamenu-primary_navigation {
padding-right: 15px !important;
padding-left: 15px !important;
display: inline-block;
}
I need to make the menubar align between the logo and checkout basket, and still make the logo and basket clickable.
Does anybody have an idea how to do that?
I solved the problem with setting the padding 1px (from 14 to 13px )lower on this class:
.wp-megamenu-wrap .wpmm-nav-wrap > ul > li > a {
padding: 15px 13px;
}
I am working on a site here: http://americanbitcoinacademy.com/
When you scroll a bit on the site a fixed nav will appear but on this fixed navigation I want to hide the logo nav BUT I still want it to appear on the regular nav bar on the top.
Here's the CSS I am using:
.nav>li>a>img {
max-width: none;
}
.menu-item a img {
border: none;
box-shadow: none;
vertical-align: middle;
width: auto;
display: inline;
}
I want it to hide on a black fixed nav but I still want it to appear on the regular nav. ANy idea how to do so?
You can use the inspector of Chrome to check this out.
The nav menu has class .affix when it is fixed/black, so using that as the parent selector to hide the image should hide it in the fixed state without affecting the menu's default state.
.main-menu.affix .menu-image {
display: none;
}
Can't use chrome as I am on iPad, as the navy bar looks different at the top and when it's further down the page, I'm guessing that at some point you apply a different class to the nav div?
You can target the img within that class with the style display: none;
Hope this helps, if not I'm sure some one on a computer can give more of an example
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}
I'm a little bit confused. I like to center the menu items of a normal bootstrap navigation bar.
But I can't find the right class i have to edit. should I use text-align, or margin: 0 auto; to realize something like this?
Currently I tried to add this CSS-arguments in .navbar, .navbar-inner and .nav.
Nothing works.
If there are some bootstrap dev's, please help me!
Do you know if there is a Forum for bootstrap stuff?
Assign fixed height, and then asign margin: 0 auto; to element that you have to center, but remember center div should not be floated or position: absolute; and it have fixed width
for example
<div class="parent">
<div class="inn"> ... </div>
</div>
To center .inn should have fixed width, and not floated or position: absolute,
i.e.
.inn{
width: 20px;
margin: 0 auto;}
To answer your question, it looks like the selector you should be modifying is .navbar .nav
Modifying that selector, you can proceed to implement your margin approach:
.navbar .nav {
margin: 0 auto;
width: ...px; /* width of .navbar .nav */
float: none;
}
or, similar to what Nick mentioned:
.navbar .nav {
position: absolute;
left: 50%;
margin-left: ...px; /* half of width of .navbar .nav */
}
I didn't delve into this too much, but it looks like .navbar .nav is getting a width associated to it (for me, it was 1170px). Because of its width, margin: 0 auto has no impact... would be nice to come up with a solution that didn't require hard-coding a width (or half-width margin-left).
You could try doing the following:
#div-id-inside-navbar{
left: 50%;
position: absolute;
margin-left: -100px /* This should be half the width of your centered content */
}
I have centered logos on my bootstrap site and this is what I had to do. I haven't looked into the exact reason why, but I don't believe text-align: center; was working all that well. This is similar to the way people often vertically center stuff with CSS.