Bugs on afterburner template
-
-
- Rreze
- Newbie
- Posts: 7
- Thanks: 0
-
Hi there,
I have two issues that we would like to solve regarding the afterburner template.
-
There is a bug in the menu that shouldn't appear! Please, take a look at image (see attached) and see how the text goes down when it is longer than the length of the menu. How can we avoid this bug?
Below is the code that I'm using for this menu:#nav {height:30px;background:#003366;z-index:999;position:relative;} #nav ul {margin:0 0 0 15px;} #nav li {list-style:none;float:left;padding-left:3px;height:34px;position:relative;} #nav li a {display:block;padding:0 10px;line-height:30px;color:#fff;font-weight:bold;} #nav li.active a {background:#003366;color:#ffffff;} #nav li:hover a, #nav li.sfHover a{background:#003366;color:#ffffff;text-decoration:none;} #nav li ul {position:absolute;min-width:200px;left:-999em;margin-left:-1px;border:1px solid #071a34;border-top:0;} #nav li ul ul {margin:-31px 0 0 200px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul, #nav li.sfHover ul ul ul ul {left:-999em;} #nav li li {padding:0;height:auto;background:#fff;min-width:200px;} #nav li li a, #nav li li.active a, #nav li li a:hover {margin:0;height:30px;line-height:30px;background:#063a6e;border-top:1px solid #006B9F;color:#ffcc33;} #nav li li a, #nav li.active li a {font-weight:normal;} #nav li:hover ul, #nav li.sfHover ul {left:4px;} #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul, #nav li li li li.sfHover ul {left:0;}-
How to improve the left menu in afterburner? Instead of bullet points that represents subsections, I would like to make a nice a simple button that looks something like the right-menu in the following link
demo.rockettheme.com/?template=leviathan
?
Thank you in advance
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
- Could you please provide a link to your site, and if applicable, a direct URL to the issue?
- James Spencer / Developer & Support / Hull, UK
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
-
You are going have to either increase the dropdown size of the whole menu, or do it specifically for the problematic menu items (which isn't necessarily difficult due to each having individual classes). The relevant code references in the CSS are as follows:
#nav li ul {position:absolute;min-width:200px;left:-999em;margin-left:-1px;border:1px solid #071a34;border-top:0;} #nav li ul ul {margin:-31px 0 0 200px;} #nav li li {padding:0;height:auto;background:#fff;min-width:200px;}
Changed instances of 200px to 250px. Or, if you wanted it specifically for the Research & Training menu, item, add the following:
#nav li.item-531 ul {min-width:250px;} #nav li.item-531 ul ul {margin:-31px 0 0 250px;} #nav li.item-531 li {min-width:250px;}
Hope that helps.
The second part is a bit more comprehensive, so beyond my ambit to provide specific code for. So I suggest inspecting the code for your menu and the one in Leviathan, and trying to blend them together. - James Spencer / Developer & Support / Hull, UK
-
-
-
- James Spencer
- Preeminent Rocketeer
- Posts: 46340
- Thanks: 50
- Also, its not a bug, as the element has a set margin, so if your menu items are too long, you will need to customize.
- James Spencer / Developer & Support / Hull, UK
-
Time to create page: 0.070 seconds