Unable to view the navigation
Permalink
Hi
I've been creating a mockup site in order to improve my skills with concrete 5 however I can't seem to get the navigation to appear in CSS via the auto nav - on logging into the edit mode I can see the 'add nav' here but when I click the box to add the auto nav box nothing happens?
this is a link to the test site i've built with concrete5
http://www.creative-media.info/concreteoctober/...
this is the site in CSS before converting to concrete5 (showing the how the navigation should look)
http://www.creative-media.info/FINAL_SITE/index.html...
below is the CSS used for the navigation:
#nav{
list-style:none;
font-weight:normal;
margin-bottom:2px;
/* Clear floats */
float:left;
width:100%;
width: 602px;
position: absolute;
height: 28px;
left: 325px;
top: 20px;
font-size: 13px;
font-family: Open Sans, helvetica, verdana, arial, sans-serif;
z-index: 999;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#000;
background:#FFFF;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#FFFF;
text-decoration:none;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 210;
}
#nav ul li{
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
font-size: 11px;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#f0f0f0;
text-decoration:none;
border-style:solid;
border-width:1px;
border-color:#fff;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#c8c8c8;
}
any help would be greatly appreciated
kind regards
Paul
I've been creating a mockup site in order to improve my skills with concrete 5 however I can't seem to get the navigation to appear in CSS via the auto nav - on logging into the edit mode I can see the 'add nav' here but when I click the box to add the auto nav box nothing happens?
this is a link to the test site i've built with concrete5
http://www.creative-media.info/concreteoctober/...
this is the site in CSS before converting to concrete5 (showing the how the navigation should look)
http://www.creative-media.info/FINAL_SITE/index.html...
below is the CSS used for the navigation:
#nav{
list-style:none;
font-weight:normal;
margin-bottom:2px;
/* Clear floats */
float:left;
width:100%;
width: 602px;
position: absolute;
height: 28px;
left: 325px;
top: 20px;
font-size: 13px;
font-family: Open Sans, helvetica, verdana, arial, sans-serif;
z-index: 999;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#000;
background:#FFFF;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#FFFF;
text-decoration:none;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
z-index: 210;
}
#nav ul li{
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
font-size: 11px;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#f0f0f0;
text-decoration:none;
border-style:solid;
border-width:1px;
border-color:#fff;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#c8c8c8;
}
any help would be greatly appreciated
kind regards
Paul
Hi
thanks for the help and advice, much appreciated.
cheers
Paul
thanks for the help and advice, much appreciated.
cheers
Paul
Hi there,
It's because your wrapper div now has the id of nav causing your top level ul to be moved left -9999px. On your current non Concrete5 site the top level ul has the id of nav. Basically this means on your current site only the drop down ul is being moved left -9999px, whereas on you Concrete5 version both the drop down and the top menu are being moved left -9999px.
To fix this try changing the css selector for #nav ul where you hide the drop down to #nav li ul this will target only the second level ul inside of the inital li
It's because your wrapper div now has the id of nav causing your top level ul to be moved left -9999px. On your current non Concrete5 site the top level ul has the id of nav. Basically this means on your current site only the drop down ul is being moved left -9999px, whereas on you Concrete5 version both the drop down and the top menu are being moved left -9999px.
To fix this try changing the css selector for #nav ul where you hide the drop down to #nav li ul this will target only the second level ul inside of the inital li
Hi
thanks for the help and advice, much appreciated.
cheers
Paul
thanks for the help and advice, much appreciated.
cheers
Paul
Like Javo said, 'ul.nav {left:-9999px}' removes the nav from screen, so erase it.
Change also '#nav ul li' to 'float: left' to have the menu in line.
Change also '#nav ul li' to 'float: left' to have the menu in line.
Hi
thanks for the help and advice, much appreciated.
cheers
Paul
thanks for the help and advice, much appreciated.
cheers
Paul
Why are you calling 'nav' twice on the new one?
One or the other