Styling a footer nav
Permalink
Hi team I have had a search about for the solution but i cant find what i need.
My css file which i am trying to sort a autonav block in the footer.
What I want is the 1st level pages across the top with their relevant sub pages under them. I also want to bold the main pages and smaller font fro sub pages and links etc but I can do this after i have managed to display them as lists. I have added the nav by adding a block to the footer and adding an auto-nav.
I have also created the footer nav page which is selected and have the only include pages set-up and working. I think the issues is i am also using the autonav block for the drop down menu using css.
css
<code>#footer-nav {
min-height:190px;
Padding: 10px;
width:960px;
text-align: left;
color: #909090;
overflow: auto;
margin-left:auto;
margin-right:auto;
}
#footer-nav a {color: #909090; text-decoration: none;}
#footer-nav a:hover {color: #ffffff; text-decoration: none;}
#footer-nav ul {
width: 700px;
height: 120px;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
list-style: none;
border: 1px solid green;
}
#footer-nav li {
float: left;
padding: 10px 20px 10px 20px;
border: 1px solid blue;
}
#footer-nav u1 li {
float: left;
padding: 60px 20px 20px 20px;
color: #ffffff;
font-size: 10px;
border: 1px solid yellow;
}
.navigation ul.nav { list-style: none; display: inline;}
.navigation ul.nav li { display: inline; padding: 8px; }
.navigation ul.nav li a { text-decoration: none; display: inline; }</code>
Footer php I don't just have a nav bar in here I have a content block and image block under it which is y I used a normal area
<code>
<footer>
<div id="footer">
<div class="navigation">
<div id="footer-nav">
<?php
$a = new Area('Footer Content');
$a->display($c); // footer editable region
?>
</div>
</div>
</code>
Any help or point in right direction thanks
Carl Lee
My css file which i am trying to sort a autonav block in the footer.
What I want is the 1st level pages across the top with their relevant sub pages under them. I also want to bold the main pages and smaller font fro sub pages and links etc but I can do this after i have managed to display them as lists. I have added the nav by adding a block to the footer and adding an auto-nav.
I have also created the footer nav page which is selected and have the only include pages set-up and working. I think the issues is i am also using the autonav block for the drop down menu using css.
css
<code>#footer-nav {
min-height:190px;
Padding: 10px;
width:960px;
text-align: left;
color: #909090;
overflow: auto;
margin-left:auto;
margin-right:auto;
}
#footer-nav a {color: #909090; text-decoration: none;}
#footer-nav a:hover {color: #ffffff; text-decoration: none;}
#footer-nav ul {
width: 700px;
height: 120px;
padding: 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
list-style: none;
border: 1px solid green;
}
#footer-nav li {
float: left;
padding: 10px 20px 10px 20px;
border: 1px solid blue;
}
#footer-nav u1 li {
float: left;
padding: 60px 20px 20px 20px;
color: #ffffff;
font-size: 10px;
border: 1px solid yellow;
}
.navigation ul.nav { list-style: none; display: inline;}
.navigation ul.nav li { display: inline; padding: 8px; }
.navigation ul.nav li a { text-decoration: none; display: inline; }</code>
Footer php I don't just have a nav bar in here I have a content block and image block under it which is y I used a normal area
<code>
<footer>
<div id="footer">
<div class="navigation">
<div id="footer-nav">
<?php
$a = new Area('Footer Content');
$a->display($c); // footer editable region
?>
</div>
</div>
</code>
Any help or point in right direction thanks
Carl Lee
Good Morning
Thanks for your reply I didn't know there was another simple nav block I will try it. Thanks
In regards to my request I am sure I should be able to do it. I have also created a customer template page "footer Nav" which I have used to have the include page options. which I followed from here,
http://www.weblicating.com/c5/footer-menus/...
That works fine It's sorting arranging the menus I am having issues with.
What I need to know is how to separate out the sub pages into different areas under there parents.
Thanks
Carl
Thanks for your reply I didn't know there was another simple nav block I will try it. Thanks
In regards to my request I am sure I should be able to do it. I have also created a customer template page "footer Nav" which I have used to have the include page options. which I followed from here,
http://www.weblicating.com/c5/footer-menus/...
That works fine It's sorting arranging the menus I am having issues with.
What I need to know is how to separate out the sub pages into different areas under there parents.
Thanks
Carl
You have this code in your css
there is an error here at #footer-nav u(numeral 1 instead of letter l) li {
} #footer-nav u1 li { float: left; padding: 60px 20px 20px 20px; color: #ffffff; font-size: 10px; border: 1px solid yellow; }
there is an error here at #footer-nav u(numeral 1 instead of letter l) li {
Thanks for your responce.
I had already noticed that as it goes and had already changed with no luck.
I am a little confused with the nav styling, I thought as I have with the dropdown menu.
#div ul {}styled lvl 1 pages
#div ul li {} was for lvl 2 pages
or
#div ul li li {} was lvl2/3 pages but This is not so or do i have to state this in footer_menu.php or in the css like this as you do for a dropdown menu.
Thanks for any help. The code above is what i used with out #footer-nav in front for the drop down menu at the top of the page!
I had already noticed that as it goes and had already changed with no luck.
I am a little confused with the nav styling, I thought as I have with the dropdown menu.
#div ul {}styled lvl 1 pages
#div ul li {} was for lvl 2 pages
or
#div ul li li {} was lvl2/3 pages but This is not so or do i have to state this in footer_menu.php or in the css like this as you do for a dropdown menu.
#footer-nav .navigation1, .navigation1 * { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} #footer-nav .navigation1 { line-height: 1.0; font: 10px;} #footer-nav .navigation1 ul { position: absolute; width: 150px; background-color: #3A3939; /* left offset of submenus need to match (see below) */ } #footer-nav .navigation1 ul li { width: 400px; } #footer-nav .navigation1 li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */} #footer-nav .navigation1 li { float: left; position: relative; width: auto; background-color: yellow;} #footer-nav .navigation1 a { display: block; position: relative;} #footer-nav .navigation1 li:hover ul,.navigation li.sfHover ul { left: 10px; top: 45px; /* match top ul list item height */ z-index: 3; background-color: pink;} #footer-nav ul.navigation1 li:hover li ul,ul.navigation1 li.sfHover li ul { top: -999em;} #footer-nav ul.navigation1 li li:hover ul,ul.navigation1 li li.sfHover ul { left: 150px; /* match ul width */ top: 0px; background-color: pink;} #footer-nav ul.navigation1 li li:hover li ul,ul.navigation1 li li.sfHover li ul { top: -999em; background-color: pink;} #footer-nav ul.navigation1 li li li:hover ul,ul.navigation1 li li li.sfHover ul { left: 150px; /* match ul width */ top: 0px;}
Thanks for any help. The code above is what i used with out #footer-nav in front for the drop down menu at the top of the page!
The url to an example would be very useful.
Hi there
The site is here ATM --http://test.usp3.net/cms/concrete5/...
It is the footer nav which I am trying to make look like this
Top Headers in bold sub pages underneath
Home Products & Services Support About Us
With there relevant sub pages listed under their parents.
Home Website Monitoring Support Options Company
Web Transaction Monitoring Submit a Ticket Our Network
Server Monitoring Email Support Contact Us
If this helps
Carl
The site is here ATM --http://test.usp3.net/cms/concrete5/...
It is the footer nav which I am trying to make look like this
Top Headers in bold sub pages underneath
Home Products & Services Support About Us
With there relevant sub pages listed under their parents.
Home Website Monitoring Support Options Company
Web Transaction Monitoring Submit a Ticket Our Network
Server Monitoring Email Support Contact Us
If this helps
Carl
Hmmm,
This is the code from your top nav bar which is working fine, I have tidied it up to make it readable,
And here is the code from your bottom nav bar
As you can see the bottom nav bar inside several divs and the lists are not coded properly to become drop downs (see the top example)
I will have another look to see what can be done..
This is the code from your top nav bar which is working fine, I have tidied it up to make it readable,
<div id="nav1"> <nav> <ul class="nav"> <li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="/cms/concrete5/">Home</a></li> <li><a href="/cms/concrete5/index.php/about/" >About</a> <ul> <li><a href="/cms/concrete5/index.php/about/contact-us/" >Contact Us</a></li> <li><a href="/cms/concrete5/index.php/about/guestbook/" >Guestbook</a></li> </ul> </li> <li><a href="/cms/concrete5/index.php/blog/" >Blog</a> <ul> <li><a href="/cms/concrete5/index.php/blog/nearly-half-of-consumers-are-buying-more-items-online-this-year/" >Nearly half of consumers are buying more items online this year:</a></li> <li><a href="/cms/concrete5/index.php/blog/hello-world/" >Tital</a></li> <li><a href="/cms/concrete5/index.php/blog/the-new-world-of-application-performance-management/" >The New World of Application Performance Management:</a></li>
Viewing 15 lines of 21 lines. View entire code block.
And here is the code from your bottom nav bar
<div class="navigation1"> <div id="footer-nav"> <div id="ccm-layout-wrapper-365" class="ccm-layout-wrapper"> <div id="ccm-layout-footercontent-5-1" class="ccm-layout ccm-layout-table ccm-layout-name-FooterContent-Layout-1 "> <div class="ccm-layout-row ccm-layout-row-1"> <div class="ccm-layout-5-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:100%"> </div> <div class="ccm-spacer"></div> </div> </div> </div> <div id="ccm-layout-wrapper-364" class="ccm-layout-wrapper"> <div id="ccm-layout-footercontent-4-2" class="ccm-layout ccm-layout-table ccm-layout-name-FooterContent-Layout-2 "> <div class="ccm-layout-row ccm-layout-row-1"> <div class="ccm-layout-4-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:79%"> <ul class="nav-header">
Viewing 15 lines of 39 lines. View entire code block.
As you can see the bottom nav bar inside several divs and the lists are not coded properly to become drop downs (see the top example)
I will have another look to see what can be done..
Or you could try out the 'Manual Nav' add-on by jordanlev: http://www.concrete5.org/marketplace/addons/manual-nav/...