i try to make my blog responsive but my navigator menu is behind the title, i want to make it in front of my title. you can look the print screen here
print-screen
and here's the nav code on media query;
.nav {
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.nav ul {
/*width: 599px;*/
padding: 5px 0;
position: absolute;
/*top: -13px;
left: -95px;*/
border: solid 1px #2FB8C8;
background: #2FB8C8 url(../images/icon-menu.png) no-repeat 10px 11px;
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
opacity:0.8;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width:599px;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
opacity:1;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
thanks in advance for your help
You could set the z-index explicitly to bring those elements forward.
.nav {
z-index:2
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.Title{
/*or what ever you gave it*/
z-index:1;
}
Check the following links for your guide. You also need to use jQuery.
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
http://webdesignerwall.com/demo/responsive-menu/
http://www.hongkiat.com/blog/responsive-web-nav/
Related
Hello i have been activly coding a new menu for phpbb for my new forums with my community and i have only one issue, its bugging me so badly the problem i have is when i setup all the code it worked fine then when i added another drop down menu it started to well do this...
[.navbar2 {
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-radius: 4px 0;
}
.navbar2 li {
left: auto;
display: inline;
padding: 0 5px;
float: left; /* This lines up the menu items horizontally */
list-style: none; /* Removes the default styling (bullets) for the list */
}
.navbar2 li ul {
position: absolute;
z-index: 100;
display: none; /* Hides the drop-down menu */
color: #565656;
min-width: 150px;
max-height: 1000px;
border-radius: 4px 0;
}
.navbar2 li ul li {
background-color: #fff;
min-width: 150px;
padding: 0 5px 0 20px;
}
.navbar2 li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border-radius: 4px;
}
/*NAV 3*/
.navbar3 {
border-radius: 4px 0;
}
.navbar3 li {
display: inline-block;
list-style: none; /* Removes the default styling (bullets) for the list */
}
.navbar3 li ul {
position: absolute;
z-index: 100;
min-width: 150px;
display: none; /* Hides the drop-down menu */
color: #565656;
float:right;
margin-left:2px;
}
.navbar3 ul li {
background-color: #fff;
min-width: 150px;
padding: 0 5px 0 20px;
}
.navbar3 li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border-radius: 4px;
margin-left:-10px;
float:right;
margin-left:2px;
}]
dropdown bug 1
dropdown bug 2
After stuffing around with some off the float: left codes i found out the problem i had its all fixed
Code Provided here..
.navbar2 {
position: absolute; /* Ensures that the menu doesn’t affect other elements */
border-radius: 4px 0;
}
.navbar2 li {
left: auto;
padding: 0 5px;
list-style: none; /* Removes the default styling (bullets) for the list */
}
.navbar2 li ul {
position: absolute;
z-index: 100;
display: none; /* Hides the drop-down menu */
color: #565656;
min-width: 150px;
max-height: 1000px;
border-radius: 4px 0;
}
.navbar2 li ul li {
background-color: #fff;
min-width: 150px;
}
.navbar2 li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border-radius: 4px;
margin-left:-10px;
float:right;
margin-left:2px;
}
/*NAV 3*/
.navbar3 {
border-radius: 4px 0;
}
.navbar3 li {
list-style: none; /* Removes the default styling (bullets) for the list */
}
.navbar3 li ul {
position: absolute;
z-index: 100;
min-width: 150px;
display: none; /* Hides the drop-down menu */
color: #565656;
float:right;
margin-left:2px;
}
.navbar3 ul li {
background-color: #fff;
min-width: 150px;
padding: 0 5px 0 20px;
}
.navbar3 li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
border-radius: 4px;
margin-left:-10px;
float:right;
margin-left:2px;
}
I'm trying to create a site navigation bar that uses sub-menus.
Using whatever I can gather from the internet I've done my best and have got one working with one small issue.
When you hover the mouse over the sub-menu, the main menu text colour does not stay white like I'd like it to.
Can anyone get this to work?
.header nav.site_nav {
float: right;
}
.header ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.header ul a {
display: block;
font-weight: bold;
color: #2C395D;
font-size: 14px;
text-decoration: none;
padding: 8px 8px 8px 8px;
}
.header ul a:hover {
color: white;
}
.header ul li {
float: left;
position: relative;
margin: 0 2px 0 2px;
}
.header ul li:hover {
background: #2C395D;
}
.header ul ul {
display: none;
position: absolute;
text-align: right;
top: 100%;
right: 0;
}
.header ul ul li {
float: none;
width: 150px;
background: #BFC8E1;
margin: 0;
}
.header ul li:hover > ul {
display: block;
}
jsfiddle code
I wasn't able to do this easily without adding more information to your html. I added a class to all top level menu items, then added a small amount of css to make them white on hover.
Updated Fiddle
Add this class to your top level menu items in html:
<a class="topLevel" href="#">Courses ▾</a>
Add this to your CSS:
.header ul li:hover a.topLevel {
color: white;
}
I have the following code:
/**** DropDown Css ******/
.inner_menu ul#nav > li span {
display: inline-block;
height: 15px;
vertical-align: middle;
width: 20px;
background: url(../images/drp_arw_dwn.png) no-repeat center;
margin-left: 10px;
}
.inner_menu ul#nav > li:hover span {
background: url(../images/drp_arw.png) no-repeat center;
}
.inner_menu ul#nav > li:hover .subnav {
display: block;
}
.subnav {
position: absolute;
padding-top: 18px;
display: none;
left: 50%;
margin-left: -100px;
border-style: solid;
border-width: 5px;
border-color:#2c91da
}
.subnav ul {
background: #333;
width: 200px;
padding-top: 15px;
}
.subnav ul li {
display: block;
margin: 0;
padding: 0 0 0 20px;
}
.subnav ul li a {
color: #fff;
font-size: 18px;
padding-bottom: 5px;
}
.subnav ul li:hover a {
color: #2c91da;
display: block;
}
/****************** Nav Menu *****************/
.header .wrapper:after {
opacity: 0.5;
}
.dashboard_page {
position: relative;
background: #fff;
padding: 42px 0;
}
.dashboard_page .wrapper {
position: relative;
z-index: 9;
}
.dashboard_page:after {
left: 0;
top: 0;
width: 100%;
height: 370px;
position: absolute;
content: "";
background: #f7f8f9;
pointer-events: none;
}
.inner_menu {
margin: 7px 0 0 0;
padding: 0;
display: block;
}
.inner_menu ul#nav {
margin: 0;
padding: 0;
display: inline-block;
border-right: 1px solid #f2f2f2;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.3);
}
.inner_menu ul#nav > li {
margin: 0;
padding: 0;
height: 52px;
line-height: 52px;
display: block;
float: left;
border-left: 1px solid #f2f2f2;
position: relative;
}
.inner_menu ul#nav > li > a {
display: block;
color: #2f2f2f;
font-size: 18px;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0 27px;
border-style: solid;
border-width: 5px;
}
.inner_menu ul#nav > li:after {
position: absolute;
width: 38px;
left: 50%;
margin-left: -19px;
content: "";
background: url(../images/menu_arw.png) no-repeat;
height: 20px;
bottom: -35px;
z-index: 9;
display: none;
}
.inner_menu ul#nav > li:hover:after {
display: block;
}
.inner_menu ul#nav > li.active:after {
display: block;
}
<div class="inner_menu">
<div class="toggle"></div>
<ul id="nav">
<li>
Link 1
</li>
<li>
Trackers
<div class="subnav">
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
The problem is that in internet explorer, when I try to move my cursor below the element to click on the dropdown, it disappears and I am unable to click it.
What am I doing wrong?
The problem was this CSS item:
.header .wrapper:after{ position:absolute; bottom:-33px; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
The attribute bottom should be a higher negative number. -150px worked for me. I changed it to this:
.header .wrapper:after{ position:absolute;
bottom:-150px
; width:100%; height:34px; content:""; left:0; background:url(../images/shadow-bg.png) no-repeat center; background-size:100% auto; pointer-events:none}
Let's break it down:
You hover over '.inner_menu ul#nav > li:hover'
The 'display' is set to 'block' for '.subnav'.
You move your mouse until it moves outside of the actual link (The one that says "Trackers")
The selector '.inner_menu ul#nav > li:hover' no longer applies, since you are no longer hovering over the link.
The background is unset.
If you move the .subnav close to the link (No spaces!) it should work better.
Here is a link to a navigation bar that uses CSS only: http://www.cssnewbie.com/easy-css-dropdown-menus/
You might want to use JavaScript for more advanced functionality.
Some limitations for CSS:
No spaces, if you sub-menu is not RIGHT next to the link to it, it probably won't work (Or would at least be very hard to implement)
No advanced fading, clicking or other events, just hovering.
On oxfordmakespace.com i have two boxes that you can see when you put your browser into portrait by making it thinner than taller.
as you can see one is higher than the other, it is .nav2 i cannot get it back in place. Can some one help please?
This is the CSS for desktop view
/* navbar desktop */
.nav {
float:right;
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav li {
float: right;
display: inline;
}
.nav a, .nav a:link, .nav a:visited {
float: left;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav a:active, a:visited {
color: Black;
}
.nav .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav a:hover, .nav a:active, .nav .active a:link, .nav .active a:visited {
background: #253;
}
/*<!----------------------------------------------------------------->*/
.nav2 {
float:left; /*desktopbackground*/
width: 40%;
background-color: #612;
height: 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
.nav2 ul {
list-style: none;
margin: 0 auto;
padding: 0 0 0 10px; //reset default padding
}
.nav2 li {
float: left;
display: inline;
}
.nav2 a, .nav2 a:link, .nav2 a:visited {
float: right;
padding: 5px 5px 5px 5px;
color: white;
display: inline-block;
height: 20px;
}
.nav2 a:active, a:visited {
color: Black;
}
.nav2 .current a {
background: #499;
color: black; /*this changes the desktop view current link*/
border-radius: 5px;
}
.nav2 a:hover, .nav2 a:active, .nav2 .active a:link, .nav2 .active a:visited {
background: #253;
}
This is the css for portrait mode
.nav {
width: 100%;
position: relative;
min-height: 40px;
background-color: #999;
margin: 0px 0;
}
/*a {
color: Black;
height: 20px;
display: block;
}*/ /*No longer used*/
.nav ul {
width: 50%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 0; /*physical position of box holding links*/
left: 46%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 75%; /*changes for image*/
background-position: 90% 50%;
}
.nav li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav a:link {
color: black;
}
.nav a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*NAVBAR--------------------------*/
.nav2 ul {
width: 35%;
padding: 2% 2% 2% 2%; /*this controls the displayed word padding*/
position: absolute;
top: 00%; /*physical position of box holding links*/
left: 2.5%; /*physical position of box holding links*/
border: solid 0px #aaa;
background: #fff url(Images/topright.png) no-repeat ; /*background color for links*/
background-size: 15% 70%; /*changes for image*/
background-position: 10% 50%;
}
.nav2 li {
width: 100%;
text-align: left;
float: left;
display: none; /* hide all <li> items */
margin: 0;
}
.nav2 .current {
padding: 0 0 10px 0 ;
Background: none;
pointer-events: none; /*allows you to click on the menu usinga touch screen and not make the page load*/
display: block; /* show only current <li> item */
}
.nav2 .current a {
background: none;
color: Black; /* changes current links color when not active*/
}
/*-----------------------------------------------------*/
.nav2 a {
display: block;
padding: 3% 5% 3% 10%;
text-align: Left;
color: black; /*changes every text item in mobile menu*/
font-size: 150%;
font-style: Arial,serif-sans;
}
.nav2 a:link {
color: black;
}
.nav2 a:hover { /*changes the moused over or selected link in nav bar*/
border-radius: 5px;
color: black;
background: lightgreen;
}
/*-------------------------------------------------------*/
/* on nav hover */
.nav2 ul:hover {
background-image: none;/*hides the background image when the navbar exands to stop it stretching*/
}
.nav2 ul:hover li {
display: block;
margin: 0 0 15px; /*space between each menu item*/
}
/*-------------------------------------------------------*/
} /*media query end--------------------------*/
I need it to be in the same position as the other one.
When your media query hits that break point remove position: relative; from .nav or set it to position: static if you're using media queries to just overwrite your desktop css
#media only screen and (max-width: 600px) and (min-width: 150px), (orientation: portrait)
.nav {
width: 100%;
/*position: relative;*/ //remove or set to position: static
min-height: 40px;
background-color: #999;
margin: 0px 0;
top: 0;
}
That will cause your header to just align to the top of the document instead of be contained within its parent
I just dont get why the background is on top of the text..
I'd really appreciate ANY help..
THX
html
<body>
...
<img...>
<div>
<div>
drop down list
<div>
<div>
body>img{
heres the background options, wanted it to adjust in height and width
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#wrap{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-flex: 1;
padding-top: 30px;
}
/* link styles und so */
a:hover{
cursor:pointer;
}
a{
text-decoration: none;
font-family: 'Sintony', sans-serif;
color:black;
}
/* drop down list */
.clear{
clear:both;
}
ul#nav{
list-style-type: none;
padding: 0;
margin-top:60px;
}
ul#nav li{
background-color: white;
float:left;
}
ul#nav li a{
display:block;
padding: 5px 10px;
color:#000;
text-decoration: none;
border-bottom: 1px solid #ccc;
list-style-type: none;
}
ul#nav li a:hover{
background-color: #aaa;
}
ul#nav li ul li{
float: none;
list-style-type: none;
}
ul#nav li ul{
position: absolute;
display:none;
}
ul#nav li:hover ul{
display: block;
}
Set the background using CSS
body
{
background-image:url('yourfilepath');
background-color:#cccccc;
}
If you don't want to use background-image element, and you want to use the img element, then you should work with the z-index property. Here you can play with it.
Here the example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex