0

I am trying to modify my navbar submenu and was able to find what it is. on the code below, I just need to change the width from 12em to "auto" to fix the submenu. Currently, the text overlaps the background.

element.style {
  float: none;
  width: 12em; 
  visibility: hidden;
  display: none;
}

The html file that refers to the menu is this:

<div class="menu-box">
<div id="menu-bar" class="nav clearfix">
<nav id="block-superfish-1" class="block block-superfish block-odd block-count-2 block-region-menu-bar menu-wrapper clearfix clearfix" role="navigation">
<h2 class="block-title element-invisible element-invisible">Main menu</h2>
<ul id="superfish-1" class="sf-menu main-menu sf-horizontal sf-style-none sf-total-items-5 sf-parent-items-4 sf-single-items-1 main menu sf-js-enabled sf-shadow">
<li id="menu-218-1" class="first odd sf-item-1 sf-depth-1 main menu list sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
<a class="sf-depth-1 menuparent" href="/">Home</a>
<ul style="float: none; width: 12em; display: none; visibility: hidden;">
</li>
<li id="menu-409-1" class="middle even sf-item-2 sf-depth-1 main menu list sf-total-children-2 sf-parent-children-0 sf-single-children-2 menuparent">
<a class="sf-depth-1 menuparent" href="/%3Cnolink%3E">What's exciting us</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-411-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/around-the-globe" style="float: none; width: auto;">Innovative ideas from around the globe</a>
</li>
<li id="menu-410-1" class="last even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/showcased-ideas" style="float: none; width: auto;">Showcased ideas from within the community</a>
</li>
</ul>
</li>
<li id="menu-412-1" class="middle odd sf-item-3 sf-depth-1 main menu list sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent" title="" href="/%3Cnolink%3E">Shared insight</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-413-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/expert-panel" style="float: none; width: auto;">Expert Panel</a>
</li>
<li id="menu-414-1" class="middle even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " href="/investment-community" style="float: none; width: auto;">Investment Community</a>
</li>
<li id="menu-415-1" class="last odd sf-item-3 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<a class="sf-depth-2 " title="" href="/thought-leaders" style="float: none; width: auto;">Thought Leaders</a>
</li>
</ul>
</li>
<li id="menu-420-1" class="middle even sf-item-4 sf-depth-1 main menu list sf-total-children-3 sf-parent-children-0 sf-single-children-3 menuparent">
<a class="sf-depth-1 menuparent" href="/%3Cnolink%3E">Interact</a>
<ul style="float: none; width: 12em; visibility: hidden; display: none;">
<li id="menu-421-1" class="first odd sf-item-1 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<li id="menu-758-1" class="middle even sf-item-2 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
<li id="menu-422-1" class="last odd sf-item-3 sf-depth-2 main menu list sf-no-children" style="white-space: normal; float: left; width: 100%;">
</ul>
</li>
<li id="menu-312-1" class="last odd sf-item-5 sf-depth-1 main menu list sf-no-children">
</ul>
</nav>
</div>
</div>

I don't know what stylesheet and what line to edit.

BTW, I am using Drupal 7 and superfish module.

chrispp
  • 17
  • 3
  • You should just use a debugging tool, like firebug, to find the answer to your question... (But if it's really on an element.style, you should search in the code, not in the css! element.style = inline css (in the template maybe?)) – Kraz Nov 12 '12 at 16:11
  • Can you provide a code example which shows all your CSS and HTML? Right now, you haven't given us enough information to solve the problem. – KatieK Nov 12 '12 at 21:53
  • This isn't even a useful block of html. What are we supposed to do with a bunch of stuff that doesn't even bother to include closing tags? – mrtsherman Nov 13 '12 at 04:06
  • updated the html code. I hope it helps.the "ul style" is what needs to be taken cared of. I don't know on what file though. The width to be specific. – chrispp Nov 13 '12 at 06:58

2 Answers2

1

Those look like the default widths set under Superfish's Supersubs plugin.

You can edit the width by configuring the menu block in question, and editing the minimum and maximum widths under Superfish Plugins > Supersubs.

Alternatively, you could disable Supersubs and set widths in your stylesheet.

Daniel Hansen
  • 156
  • 5
0

Had the same Problem.

I fixed it by removing the superfish.js from the modules folder. (using Version 7.x-1.9-beta4)
Otherwise this may help you: Superfish dropdown menu width

Mxyk
  • 10,678
  • 16
  • 57
  • 76
Slowmotion
  • 1