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;
}
Related
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've been trying to horizontally center the .row-fluid container with many other nested elements, but couldn't find the right way to do that.
Basically, it's the user account page with 4 tabs.
Here's how it looks like now: codepen.io full page view
Also, I need to center the nav tabs, I tried to apply text-center to them, but they didn't move.
And for some reason, when I change the nav tab from the first to any other, the whole container moves a little, changes its left margin, is it because of the table inside the first tab?
Here's the workspace link where I typed the code.
Could you please help me to horizontally center the whole container and position the navigation tabs in the center of their blue container (ul element)?
.row-fluid container appears to be centered. The elements within however are not. You need to change:
<div class="col-sm-4 col-md-4 user-details">
to this:
<div class="col-sm-4 col-md-4 col-md-offset-4 user-details">
Update: To center the nav links.
CSS:
.user-info-block .navigation {
width: 100%;
margin:0;
padding: 18px 0;
list-style: none;
border-bottom: 1px solid #428BCA;
border-top: 1px solid #428BCA;
text-align: center;
}
.navigation li {
display:inline;
}
.navigation li a {
padding: 20px 30px;
}
I'm creating a navigation bar for a website and I want the menu elements to change background color when I hover the cursor over them. The color changing part works however, if I take a closer look at the nav bar when I hover the cursor over one menu element I can see that the nav bar (div) and the menu elements (a) aren't the same height. (The red rectangular isn't as high as the orange one.) It's just one px or so but it's really annoying. I used 20px padding for the height, but apparently something's wrong and I'm sure there's a better way to make it work. I'm new to web development and CSS by the way.
div {
background-color: orange;
padding: 20px;
}
a {
padding: 20px;
}
a:hover {
background-color: red;
}
<div>
Menu 1
Menu 2
</div>
Thanks for your help in advance.
Have you tried:
div {
background: orange;
}
a {
display: inline-block;
padding: 20px;
}
By setting display: inline-block; on your <a>, the padding should behave as required.
On my site, http://www.tokensofchange.org, the only way to position my navbar in the correct place is to use a margin-top style in the CSS.
.nav {
margin-top:10.3%;
width: 70%;
background-color: #050936;
height:92px;
float: right;
border-top: 5px solid rgba(0,108,255,0.35);
}
If I remove the margin-top: 10.3%, the navbar is pushed up under the green buttons shown on the site. I am not sure if the background image is formatted incorrectly to push the navbar down:
.backgrounddiv {
background: url('/images/Background_Index3.jpg');
padding-bottom: 2%;
background-size: 100% auto;
}
The two buttons displayed do not have any margin styles included, so I am unsure why the navbar does not sit below the header with the background image, logo, and buttons. Any ideas would be greatly appreciated. Thanks!
You have a negative margin of -9em on the .wrapper div. Remove that and you can then remove the margin-top:10.3%; from your navigation.
I hope that helps
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; }