Hi,
the text of the 2th level menu (dropdown) is overlapping with the first level menu, if the description of the menu "SECOND" has 2 lines.
See here:
http://i31.tinypic.com/35i6c6f.jpg
Any workaround to solve this?
Thanks.
Text of 2th level menu is overlapping with 1st level menu
16 posts from 4 voices- Started 2 years ago by colorit
- Latest reply from lorenzo
- This topic is resolved
-
you can edit the top value of the ul that is positioning the whole menu in style.css:
#top #catnav ul { display:none; left:-2px; position:absolute; top:57px; width:172px; }increase the top value and the menu will move down ;)
Posted 2 years ago # -
hello Kriesi,
here i am bothering you again :(
i am having the same issue, where do i find the style.css file?
i see there is one inside wp-content/display and one inside wp-content/display2, but in either one i cannot find the line #top #catnav ul {besides this i would like to reduce the space between the menu item description lines.
if you look at the picture posted by clorit, it is the space between lines saying "Fotografie und Fotokuns"
how can i do that?thank you for your help!
Posted 2 years ago # -
The style.css file is in the root of the active themes folder.
The code provided for @colorit was for the Newscast theme, I take it you're using Display?
If so, can you provide a link and screenshot.
Posted 2 years ago # -
hi James,
thank you for the reply.
yes i am using display.
here is the link to my website:
http://www.custom-sportbike-parts.com/if you mouse over the "parts catalog" you can see where the overlapping is
i would like to fix the overlapping moving down the drop down menu.
also i would like to reduce the space between the 2 menu item description lines (the space between "custom sportbike & streetfighter parts).can you please point out where i should edit the style.css file?
also is it the file inside wp-content/themes/display or wp-content/themes/display2?
thank you for your help!
Posted 2 years ago # -
Hey!
I see the problem. Add this code to the end of style.css:
#top #nav ul { top: 66px !important; }This will move the sub-navigation down to just under the second line of description text.
From the source code of your site, it should be in the display2 folder.
Regards,
JamesPosted 2 years ago # -
great!
thank you!!!the other thing i would like to do is to reduce the space between the lines with the smaller font, the space between the first and the second lines. for example the space between "Eurocomponents" and "Company Info" and again the space between "New Sportbike &" and "Streetfighter Parts" and so on.
regards,
LorenzoPosted 2 years ago # -
Sure, just add this to the end of style.css:
#nav li a span { line-height: 12px; }You can adjust the 12px height to anything you like (the font size is 10px so should be at least 11px so there is some gap between lines).
Posted 2 years ago # -
Hello James,
I have just realized that also the submenus need to be lined up.
Please go to:
http://www.custom-sportbike-parts.com/Mouse over: Parts Catalog
And then mouse over: Hand Controls >
As you can see Brake Controls, Cable Clutch Controls and Hydraulic Clutch Controls are not lining up properly.
Please let me know where I should edit in the style.css file.
Again thank you for your help!
Posted 2 years ago # -
Hi!
Ok, the previous !important tag interfered with this.
Add this to the end of style.css:
#top #nav li ul ul { top:-1px !important; }This should solve the alignment issue :)
Best regards,
JamesPosted 2 years ago # -
Hi James,
I hate to be such a pain in your butt, but I am running into something else I would like to change...
for seo purposes I need to have pretty look descriptions.Please check Parts Catalog / Fluid Tanks & Reservoirs
In the submenu that opens up on the right, I would like to reduce the space between the lines (for example the space between the lines "Universal Motorcycle Fluid" and "Tanks").
Thank you again for all your help!
Lorenzo
Posted 2 years ago # -
The line height is dictated by this code in style.css (around line 128):
#top #nav ul a { cursor:pointer; font-size:12px; line-height:28px; }Change 28px to a smaller value (eg 20px) to adjust the line height.
Posted 2 years ago #
Reply
You must log in to post.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
