WordPress.org

1. nomiree
   Member
   Posted 3 months ago #

   Ok, I'm using wordpress theme SLR Lounge V2, and am trying to modify it to suit my needs. The problem I'm having is with my navigation's drop down menu. I'm currently using a custom menu (wordpress functionality, not theme).

   Initially, there was no background behind the drop down at all (so you couldn't really read it), which I've managed to modify to get the colour I want, however, I don't want the gaps, and I want it all to line up flush on the right hand side. Here's a screenshot of what I'm talking about:

   http://i.imgur.com/uSn1i.jpg

   I've played with padding etc to no avail. Also, sometimes the navigation elements end up paired beside each other instead of a straight vertical list if I play with the padding.

   Here is the css I have relating to the drop down navigation:

   /* Start Menu Items */
   
   #menu {
   list-style:none;
   margin:0;
   padding:0;
   width:1000px;
   height:100%;
   border:none;
   }
   
   #menu:after {
   content:'';
   display:block;
   clear:both;
   } 
   
   #menu li.hover a,#menu li:hover a,#menu li.hover,#menu li:hover {
   	position: relative;
   
   }
   
   #menu li.hover ul, #menu li:hover ul {
   	display: block;
   }
   
   /*start drop-down menus on the top menu*/
   
   #menu ul {
   	padding:0;
   	margin:0 0 0 -10px;
   	list-style:none;
   	width:108px;
   	display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
   	position: absolute;
   }
   
   #menu ul li a { /*This is the drop down stufff */
   	text-align:left;
   	float:right;

2. dulbie17
   Member
   Posted 3 months ago #

   I have spent SO MANY HOURS trying to find the answer to this question as I am using the same theme and had the same problem... I JUST finally fixed it, and made an account to respond to your message in hopes to save you time and stress!!! here's what I found to work for me, I'll just paste my coding in for you!

   (right where your coding you pasted above ends, is where you should be changing all the items)

   #menu ul li a { /*This is the drop down stufff */
   	text-align:center;
   	float:right;
   	background-color:#000000;
   	margin:0px 10px -30px -25px;
   	padding:10px 10px 10px 10px;
   	font-size:10px;
   	width:108px;

   you can change the text alignment in the first line, and the margin and padding > play around with those too. but the theme was missing the bottom width section which made it a solid box around the drop down menu with no spaces or just highlighted words. if you change the "108px" to a different number to make the drop down menu smaller or bigger, just make sure you change the "width: 108px" in the section right above that! hope this helps :)

3. nomiree
   Member
   Posted 3 months ago #

   Thank you so much! After many hours of playing, I'd come up with a different solution, which involved modifying the parent IDs (#menu etc), but your result still looks cleaner. The only issue mine still had was there was slightly more padding on the right than the left which couldn't seemed to be fixed no matter what I did.

   So I ended up switching to your way. Why is something so simple always the answer? And you always only work it out once you've spent many many hours on it.

   Although I've now switched to your way, here's the code I came up with just in case you're interested (or if anyone else is having similar issues that the above code can't fix.

   /*start drop-down menus on the top menu*/
   
   #menu ul {
   	padding:0;
   	margin:0 0 0 -10px;
   	list-style:none;
   	width:108px;
   	display: none; /*******if you delete this, your drop down menu will appear randomly on the page somewhere **/
   	position: absolute;
   }
   
   #menu ul li a { /*This is the drop down stufff */
   	text-align:left;
   	float:right;
   	background:#333333;
   	margin:0 10px 0 10px;
   	padding:0 10px 0 0px;
   	font-size:10px;	
   
   }
   
   #menu ul li a:hover {background:#333333;}
   
   /*end drop-down menus on the top menu*/

Reply

You must log in to post.