StudioPress Community Forums
  StudioPress Community Forums > Forums > General Discussion
For help and support, access to your downloads, or to manage your account please log into My StudioPress.

These forums have been set to read-only so you can browse the existing topics for any questions you may have.

For general discussion on WordPress, CSS and design (NOT for support) visit the new Community Forums.
 
 
Thread Tools Display Modes
Prev Previous Post   Next Post Next
  #1  
Old 03-14-2010, 10:12 AM
ricksheets1 ricksheets1 is offline
Registered User
Genesis Member
 
Join Date: Feb 2010
Posts: 9
Default SubNavBar- Make dropdown menu horiz instead of vertical

I saw a question in the General Discussion about creating a horizontal dropdown menu instead of a vertical one in the Church Theme.
I had a need for this too as my subcategories were too numerous to list vertically. I hacked this substitute subnav css together from various sources and it seems to work.
My development site is
http://74.53.25.163/~talanta

/************************************************
* SubNavbar *
************************************************/
#subnavbar{
background-color: #8A3324;
display:block;
font-size:1.1em;
height:30px;
width:960px;

}
#subnav {
margin: 0px;
padding: 0px;
}

#subnavbar, #subnavbar ul {
line-height: 1;
list-style: none;
}

#subnavbar a ,#subnavbar a:hover{
border:none;
display: block;
text-decoration: none;
}

#subnavbar li {
padding: 1px;
border: 1px solid #8A3324;
margin-bottom: 0px;
background-color:#8A3324;

float: left;
list-style:none;
}

#subnavbar a,#subnavbar a:visited {
color:#FFFFFF;
display:block;
font-weight:bold;
padding:6px 12px;
}

#subnavbar a:hover, #subnavbar a:active {
color:###FFC125;
text-decoration:none
}

#subnavbar li ul {
border-bottom: 1px solid ##FFC125;
height: auto;
left: -999em;
position: absolute;
width: 600px;
z-index:999;
}

#subnavbar li li {
width: auto;
}

#subnavbar li li a,#subnavbar li li a:visited {
color:#000000;
font-weight:normal;
font-size:0.9em;
}

#subnavbar li li a:hover,#subnavbar li li a:active {
color:#FFC125;
}

#subnavbar li:hover ul, #subnavbar li li:hover ul, #subnavbar li li li:hover ul, #subnavbar li.sfhover ul, #subnavbar li li.sfhover ul, #subnavbar li li li.sfhover ul {
left: 0px;
}

BEST REGARDS,
RICK

Last edited by ricksheets1; 03-15-2010 at 06:03 PM. Reason: improved code a bit
 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Make the dropdown menu font smaller sammi General Discussion 1 05-19-2010 03:31 PM
How do i make a dropdown menu transparent? calfaro23 General Discussion 4 03-15-2009 05:13 PM
Remove dropdown menu? (Or make it work?) KingsCrown General Discussion 4 03-12-2009 07:15 AM
Dropdown Menu - "subnavbar" ChecMark General Discussion 1 01-14-2009 08:03 AM


All times are GMT -5. The time now is 12:30 AM.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.