I'm trying to design my first responsive site and am having issues with the navigation. I've got everything somewhat working up to point where the hamburger kicks in. At that point, the drop down menu goes behind the form elements and I don't understand enough at this point to change the styling without affecting the normal navigation.
It seems that most of the things I've looked at are using the standard BootStrap elements with little more than color changes. I need to change the height of the nav bar (along with the hamburger), center the nav but when the site goes mobile, the nav dropdown would need to change font and background colors and text alignment.
I've got a bootply running and will continue to research as I go. I know I have a long way to go but would appreciate a helping hand getting me over this hurdle.
The bootply is at http://www.bootply.com/xtOWUEP1bw. Thanks in advance for any help.
You need z-index and background color.
Put z-index in .navbar and put background color in .navbar-collapse.in like below;
.navbar {
z-index: 10;
}
.navbar-collapse.in{
background:#fff
}
Related
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
Recently, I created a navigation bar and transformed the menu items into a parallelogram using -webkit-transform:skew(-30deg); and the tweaks of the community.
Now, I tried fixing the dropdown menus with the CSS class .submenu.
This is my progress so far: http://jsfiddle.net/an5mb2y3/1/
But there are some bugs I could not fix:
Font smoothing: When I hover over the dropdown menu items, the font gets blurry. After another second, the font gets clear. I read about using -webkit-font-smoothing: antialiasedto fix this, I tried it and had no success.
Also, the dropdown menu gets displayed in the background, behind the embedded image. I want to show the menu on a top layer of the image. What I tried was changing the z-index to a bigger value. But it did not work.
I want to display the submenu from the position where the parallelogram starts while hovering. I tried margin-left: 42px; on the .submenu class, but this doesn't work for both dropdown menus at the same time.
Add this CSS dropdown menu up:
nav.nav-primary{z-index: 1; position: relative;}
Recently I am working on a new website and I am creating it with bootstrap. Here is the bootply link that have my website.
http://www.bootply.com/9pUX4JwEYb
According to that HTML in this Link, I have a trouble that i cant fix yet. When I am scrolling up, the text "Main Bodysssss..." is going over the navigation bar. I have tried to position it but no help. Just tell me how to fix this. Many Thanks.
A higher z-index for .navbar should fix this (working example):
.navbar {
z-index: 10;
}
From the documentation,
When elements overlap, z-order determines which one covers the other.
An element with a larger z-index generally covers an element with a
lower one.
I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}
In the below image my drop down menu is not displaying over the content.It is very transparent know.Can anyone help me what I have to add to make this drop down menu un-transparent.
Your dropdown is probably a div in the html dom. You could find the name of that `div' and then apply a background to it using css:
.dropdown_div_name { background-color: white; }
Edit:
Re looking at the image you posted it is most probably a problem with the z-index as others also suggested, since for example if you look at the 'Technology/Connected TV' header, that shows over the menu contents. That could be fixed by changing the z-index of the dropdown menu
.dropdown_div_name { z-index:100; }
where 100 should be a number bigger than the z-index of the rest items that you want it to overlap
A background-color. Without one, the default colour is transparent, hence you see everything behind it.