I really like having the Superfish menus. However, I'm trying to center them in the page, but I'm running into difficulties. I can center the logo with a text-align:center for the header...but the menus don't follow. Any way to do this?

Thanks!

CommentFileSizeAuthor
#21 menu-centered.png24.78 KBkingfisher64
#21 menu-centered2.png7.86 KBkingfisher64
#11 superfish-7.x-1.8-alpha5.tar_.gz22.76 KBAnonymous (not verified)
#10 superfish-7.x-1.8-alpha5.tar_.gz22.76 KBAnonymous (not verified)
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Assigned: Unassigned » Jeff Burnz

Easy man...

#superfish-inner {
float:left;
position:relative;
left:50%;
}
#superfish-inner ul {
position:relative;
left:-100%;
}

In layout.css reset the left margin to 0 (line 163 I think), something like #superfish-inner { margin: 0 ;}

IE6 should survive... might jump around a bit on loading, too busy to test, have a good one!

Peace out.

daniorama’s picture

Ok, I've tried that but I'm not sure where should I add the #superfish-inner and #superfish-inner ul code, should it be in superfish.css or in style.css? Thanks!

Jeff Burnz’s picture

Probably doesnt matter, add it to style.css below the other superfish styles.

daniorama’s picture

Ok, I don't know why is not working with Superfish Menu (but with Nice Menus) So what I did was just giving the menu a fixed width and using auto-margins. I'm willing to find a solution to nonfixed width menus, but right now I have to finish my Website ASAP.

When I used your solution, I just added all the code into the layout.css of the zen subtheme. the menu was placed left from the middle of the page, it was responding to the change of size accordingly, but the position was false. I tried change the left position to right, and it worked, but when I changed the size it moved just in the opposite supposed direction (that was obvious)

PS: I think I should continue this issue in the Zen issues queue, I don't want to disrupt the Pixture theme queue.

Jeff Burnz’s picture

Status: Active » Closed (fixed)
Problue Solutions’s picture

Status: Closed (fixed) » Active

I tried the code in the initial post but it doesn't work.

Is there a solution to center the superfish menu?

I really really need to get it centered, I've used firebug and tried everything I can think of but having no luck :(

Problue Solutions’s picture

This goes in style.css:

#superfish-inner {
float:left;
position:relative;
left:50%;
}

and this goes in layout.css:

#superfish-inner ul {
position:relative;
left:-50%;
}

In the second bit of code it should be left:-50% and not -100%

Anonymous’s picture

If you are using superfish menus for Drupal 7:

1) Go to modules>superfish>css and open superfish.css
2) Look for:

.sf-menu {
line-height: 1.0;
z-index: 99;
}

Add the following lines:
float:left;
position:relative;
left:50%;

3) Look for:

.sf-menu ul li {
width: 100%;
}

Add the following line:
left:0%;

4) Look for:

.sf-menu li {
float: left;
position: relative;
}

Add the following line:
left:-50%

I hope this helps!

daniorama’s picture

Claudiuceus, at least with the last dev version of Superfish module for D7, that does not work :(

Anonymous’s picture

Hi Daniorama, attached is the file I was using for Drupal 7.

Anonymous’s picture

Please let me know if that worked!

tardis4242’s picture

Thanks so much for posting this. I tried it in MAYO and it worked perfectly!!

mcfilms’s picture

@claudiuceus

Nice work. Well documented and an easy fix. You probably saved me hours muddling around in css.

Thank you.

Marshcast’s picture

Thanks, claudiuceus. really helpful.
Am a bit worried about whether it's best to edit these files though - will I loose them in a n upgrade? should I be copying the files out first?

ChrisLaFrancis’s picture

Thanks, claudiuceus. I'm using Drupal 6.22 with a Zen 6.x-2.1 subtheme and Superfish 6.x-1.8, and your CSS helped me center the primary links in the navigation block. For future reference, I just added this code to blocks.css:

#block-superfish-1 .content .sf-menu {
	float						: left;
	position					: relative;
	left						: 50%;
}

#block-superfish-1 .content .sf-menu ul li {
	left						: 0%;
}

#block-superfish-1 .content .sf-menu li {
	left						: -50%;
}
Fakos’s picture

Thank you Claudiuceus. Post #8 worked like magic.

hamish_s’s picture

Thanks Claudiuceus - your advice and code still works, and is still helping others after 8 months.

isimgt’s picture

Thanks Claudiuceus

nikiking’s picture

Thanks Claudiuceus - the fix worked on my non-drupal site as well.

hamish’s picture

Claudiuceus,

Thanks for the code. It does work, however, as the number of menu items have expanded, I now find that a white band comes up on the right-hand side of the page. The right-side code that sets the div -50% expands outside the page frame. (www.reflectionwall.com) Do have any ideas on how to contain this - other than reducing the font size in the menu?

Thanks,

Hamish

kingfisher64’s picture

FileSize
7.86 KB
24.78 KB

I have the exact same issue as hamish.

I'm running omega theme 7.x-3.1 & superfish 7.x-1.8

Jeff Burnz’s picture

Status: Active » Closed (fixed)

Really old thread, ask in the forum or that other themes issue queue etc.

rob8888’s picture

Thanks Claudiuceus, works perfectly! Saved me a lot (more) troubleshooting.

deanflory’s picture

#8 worked for me on 2013-06-07 where there were only minor changes in the original stylesheet but they are easily found classes to drop in the changes.

One note: the superfish.css is in the superfish libraries folder, not the module folder if you're using the Libraries module properly.

Works with:

  • Superfish 7.x-1.9
  • AdaptiveTheme AT Core 7.x-3.1+68-dev (using a custom subtheme, other subthemes like Pixture Reloaded have a "centering" option in the theme admin page settings that works)

claudiuceus saves the day and night, and day!

madelyncruz’s picture

This is the easiest way to align the superfish to center,

ul#superfish-1 { text-align: center; float: none; }
#superfish-1 > li { display: inline-block; float: none; }

I have been tried this many times so this should be work. Goodluck :)

kingfisher64’s picture

#25 Just tried this method. It works fine in the latest versions of firefox, opera, chrome, ie, safari however ie7 is has layout issues in which menu items get stacked vertically rather than horizontally.

Probably need to add a conditional stylesheet for ie7 to remove inline-block method.

madelyncruz’s picture

There is a default class for ie7 to ie9 in drupal which is the conditional css, just remove the display: inline-block; then get back the default one when using ie7.

eg.

.lt-ie7 ul#superfish-1 { float: left; }
.lt-ie7 #superfish-1 > li { float: left; }

madelyncruz’s picture

I have tried this one and it works on IE7

eg.

#block-superfish-1 { text-align: center; }
ul#superfish-1 { display: inline-block; float: none; }

sjhuskey’s picture

I thought that #8 worked, but it caused extra space to the right side of the page, resulting in horizontal scrolling when I needed my layout to be fixed in the center of the page (i.e., with no horizontal scrolling).

#28 solved my problem, but I found that it added extra space on the bottom of the navigation bar. I fixed the problem with this:

.region-navigation {padding: 0;margin-bottom: -5px;}

madelyncruz’s picture

#8 will consumed too much space that's why it has a long scrollbar at the bottom (overflow hidden will work if there is no sub menu)
#27 won't add a space at the bottom but not compatible with IE7
#28 gives an extra space at the bottom but compatible with IE7

but I use #27 most of the time but then when viewing at IE7 I have to float it again so it will align into each other.

ragavendra_bn’s picture

#28 works on Chrome, FF and IE8 by putting it in sites/all/libraries/superfish/css/superfish.css

davidjmcq’s picture

#28 worked for me - thanks. I was wasting ages trying to figure out which class to center.

To avoid the problem with upgrades, I've created a local.css where I put all my tweaks. You have to add the local.css file to your theme's .info file to be recognised.

jshimota01’s picture

Issue summary: View changes

Client asked for centering of the horizontal menu on a fixed width page. Previous designer (not a developer per se) used Nice Menu's to accomplish the horizontal menu... with support for Superfish turned on (the javascript switch etc).

I tested using css injector:
/* The wrapping the nice menu ul */
#block-nice-menus-1 div.content {
position: relative;
float: left;
left: 50%;
}
/* The nice menu ul */
#block-nice-menus-1 #nice-menu-1 {
position: relative;
float: left;
left: -50%;
}

and viola. centered. ** Except ** I got the horizontal bar problem on the bottom of my page. I dug all through the codes and not being css capable... couldn't figure out squat. Firebug did expose some of the problem, but not really much help. I tried adding widths ala:
#block-nice_menus-1 {
margin:auto;
width: 985px;
}

#main-menu {
margin: auto;
width: 1200px;
}

#main-menu-inner {
margin: auto;
width: 1010px;
}
and still had the trouble. Then I discovered these entries above - #28 and #29 - and modified it by adding these entries to the bottom of my customized nice menus css file:

#block-nice-menus-1 { text-align: center; }
ul#nice-menu-1 { display: inline-block; float: none; }
.region-featured {padding: 0;margin-bottom: -5px;} /* my region was called featured - you undoubtedly will use a different region name on this line if you cut/paste */

poof. FINALLY a fix after 2 days. Tested on chrome (v unknown), FF 37 and Ie 11, all good. Someday when I have 6 months to kill I'll learn css....

"I'd rather program the calculations of the moons' trajectory after contact with a meteor then dink with CSS."

liviokujur’s picture

#block-superfish-1 > ul {
text-align: center;
padding: 0;
width: 100%;
}
#block-superfish-1 .sf-menu li {
float: none;
position: relative;
z-index: 498;
display: inline-block;
text-align:left;
}