Version 6.x-3.0

Want to "float" the superfish menu to the right?

What .css files to edited and what code to change?

I'm also interested in centering the menu for the version I have. Is this possible?

Thanks

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Doesn't matter what style sheet you use, style.css or superfish.css

#superfish-inner {float: right; margin-right: 15em;}

You need to add margin-right equal or greater than the value of the drop down, or else a horizontal scroll will appear on hover. The width of the drop down is 15em.

The code for centering the menu is already in superfish.css, just uncomment to use - this question is covered here http://drupal.org/node/308523

gustavson’s picture

gustavson commented

I changed code but for some reason, menu is still floating left.

Here's is the relevant code from style.css:

/* Superfish Default skin */
#superfish-inner .menu {
  float: right;
  margin-right: 15em;
}
#superfish-inner .menu a {
  padding: 6px 12px 7px;
  text-decoration:none;
}
#superfish-inner .menu a, 
#superfish-inner .menu a:visited  { 
  color: #FFF;
}
#superfish-inner .menu li {
  background: #000;
}
#superfish-inner .menu li li {
  background: #000;
}
#superfish-inner .menu li li li {
  background: #000;
}
#superfish-inner .menu li:hover, 
#superfish-inner .menu li.sfHover,
#superfish-inner .menu a:focus, 
#superfish-inner .menu a:hover, 
#superfish-inner .menu a:active {
  background: url("images/sf-hover-tile.png") repeat-y left top;
  outline: 0;
}

Am I making changes to the wrong code?

Jeff Burnz’s picture

Jeff Burnz commented

Copy and paste and/or review the code I posted again...

#superfish-inner {float: right; margin-right: 15em;}

NOT...
#superfish-inner .menu {...}

gustavson’s picture

gustavson commented

Sorry,

Do i add the code you gave to the code that is already there?

Like this:

/* Superfish Default skin */

#superfish-inner {float: right; margin-right: 15em;}

#superfish-inner .menu {
  float: right;
  margin-right: 15em;
}
#superfish-inner .menu a {
  padding: 6px 12px 7px;
  text-decoration:none;
}
#superfish-inner .menu a,
#superfish-inner .menu a:visited  {
  color: #FFF;
}
#superfish-inner .menu li {
  background: #000;
}
#superfish-inner .menu li li {
  background: #000;
}
#superfish-inner .menu li li li {
  background: #000;
}
#superfish-inner .menu li:hover,
#superfish-inner .menu li.sfHover,
#superfish-inner .menu a:focus,
#superfish-inner .menu a:hover,
#superfish-inner .menu a:active {
  background: url("images/sf-hover-tile.png") repeat-y left top;
  outline: 0;
}

Tried this and does not work.

Jeff Burnz’s picture

Jeff Burnz commented

Really...

How come its working here then?

http://drupalstaging.com/pixture2/

Looks like you're on you're own then, I can't help you any more 1) without a link and 2) more details than "it doesn't work".

gustavson’s picture

gustavson commented

Wow...

If I knew why it was working there, then I probably wouldn't be asking here?

I don't know what else to give you?

I did what you said

Copy and paste and/or review the code I posted again...

#superfish-inner {float: right; margin-right: 15em;}

NOT...
#superfish-inner .menu {...}

and the menu does not float right.

Can you at least tell me by looking at the last bit of code that I posted, that I inserted your code correctly?

If so, then I can troubleshoot somewhere else.

Thanks for you help!

Jeff Burnz’s picture

Jeff Burnz commented

Did you resave the theme settings?

With colorable themes, if you place new code in style.css you must resave the theme settings for it to take effect.

My apologies, I should have mentioned that before.

gustavson’s picture

gustavson commented

Pasted the code into the style.css file and uploaded it, re-saved the "Pixture Reloaded" theme settings and it worked.

Thank you jmburnz!

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed
Anonymous’s picture

Anonymous (not verified) commented
Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.