By dlc035 on

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?

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

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

vm’s picture

vm commented

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.

dlc035’s picture

dlc035 commented

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;
}
vm’s picture

vm commented

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.

dlc035’s picture

dlc035 commented

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.

vm’s picture

vm commented

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.

cfox612’s picture

cfox612 commented

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

dlc035’s picture

dlc035 commented

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