Positioning 2nd Superfish menu without affecting the other

Posted by dlc035 on January 8, 2013 at 4:20pm

I want to use two Superfish menus on my site. I already have one as the navigation bar, and I need one in the top "headline" block of my theme. I am trying to figure out how to position the second Superfish menu in that block; right now it is way off from where I'd like it to be. I have tried altering the superfish.css file, but when I try to modify positioning, it is affecting the Superfish menu in the navbar, which I do not want to happen. How would I go about doing this?

Comments

I am guessing each menu has a

Posted by nevets on January 8, 2013 at 4:59pm

I am guessing each menu has a wrapper div with a unique css id that code be used to target the css.

=-=

Posted by VM on January 8, 2013 at 5:03pm

don't alter superfish.css file. target the wrapper or the block the menu is in.

A link to the site in question would provide more specific responses. Difficult to be specific with CSS issues when the site can't be seen.

firebug for firefox or chrome's developer tools will aid.

Unfortunately, the site is

Posted by dlc035 on January 8, 2013 at 5:11pm

Unfortunately, the site is not live yet. I am working on it locally. I don't know if this would help, but here is the CSS of the block that I want to place the superfish menu into. From there, I don't know where to go. Please let me know if there is anything else I can do to be more specific.

#headline-wrapper {
  background: url(../images/bg-pattern.gif) 0 0 repeat #0e0909;
  height: 38px;
}

#headline-wrapper .block {
  float: left;
}

#headline-wrapper .block-search {
  float: right;
  position: absolute;
  right:5px;
  background: #0d0808;
  border: 1px solid #26160b;
  height: 26px;
  margin: 5px 0 0 0;
}

#headline-wrapper form {
  margin: 0;
}

#headline-wrapper .form-item, 
#headline-wrapper .form-actions {
  margin: 0;
}

#headline-wrapper .form-actions {
  padding: 0;
  border: none;
  background: none;
  float: left;
}

#headline-wrapper .form-text {
  float: left;
  width: 210px;
  padding: 0;
  margin: 0;
  border: none;  
  background: none;
  border-radius : 0;
  box-shadow: 0;
  font-size: 12px;
  color: #fff;
  font-style: italic;
  padding: 0 0 0 5px;
  margin: 3px 0 0 0;
}

#headline-wrapper .form-submit {
  width: 33px;
  height: 26px;
  background: url(../images/ico-search.png) 0 0 no-repeat;
  overflow: hidden;
  text-indent: -999em;
  cursor: pointer;
  border: none;
  margin: 0;
}

=-=

Posted by VM on January 8, 2013 at 5:16pm

CSS snippets don't aid as they don't illustrate the HTML being output in the browser nor the exact CSS on all elements in the surrounding area.

Unfortunately, the site I'm

Posted by dlc035 on January 9, 2013 at 1:25pm

Unfortunately, the site I'm working on is not live yet. I have a link to the demo site for the theme. Would that be any help? It's at http://education.weebpal.com/. I am trying to position the Superfish menu in the headline region, where the search form is.

=--=

Posted by VM on January 9, 2013 at 1:54pm

the menu in question isn't in use on the demo site therefore that won't aid much either beyond surrounding elements.

I suggest firebug for firefox or chromes developer tools.

as an aside you can view your rendered source and paste it to pastebin.com and link to it here. Perhaps that will provide more insight.

---

Posted by cfox612 on January 9, 2013 at 2:28pm

There are a few issues in the Superfish Issue tracker on this topic. This post might help: http://drupal.org/node/1424982

Thanks everyone. I figured

Posted by dlc035 on January 9, 2013 at 8:00pm

Thanks everyone. I figured it out. Had to go into the block.css file and target .sf-menu in the headline-wrapper.