Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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!
Comment | File | Size | Author |
---|---|---|---|
#21 | menu-centered.png | 24.78 KB | kingfisher64 |
#21 | menu-centered2.png | 7.86 KB | kingfisher64 |
#11 | superfish-7.x-1.8-alpha5.tar_.gz | 22.76 KB | Anonymous (not verified) |
#10 | superfish-7.x-1.8-alpha5.tar_.gz | 22.76 KB | Anonymous (not verified) |
Comments
Comment #1
Jeff Burnz CreditAttribution: Jeff Burnz commentedEasy 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.
Comment #2
daniorama CreditAttribution: daniorama commentedOk, 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!
Comment #3
Jeff Burnz CreditAttribution: Jeff Burnz commentedProbably doesnt matter, add it to style.css below the other superfish styles.
Comment #4
daniorama CreditAttribution: daniorama commentedOk, 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.
Comment #5
Jeff Burnz CreditAttribution: Jeff Burnz commentedComment #6
Problue SolutionsI 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 :(
Comment #7
Problue SolutionsThis 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%
Comment #8
Anonymous (not verified) CreditAttribution: Anonymous commentedIf 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!
Comment #9
daniorama CreditAttribution: daniorama commentedClaudiuceus, at least with the last dev version of Superfish module for D7, that does not work :(
Comment #10
Anonymous (not verified) CreditAttribution: Anonymous commentedHi Daniorama, attached is the file I was using for Drupal 7.
Comment #11
Anonymous (not verified) CreditAttribution: Anonymous commentedPlease let me know if that worked!
Comment #12
tardis4242 CreditAttribution: tardis4242 commentedThanks so much for posting this. I tried it in MAYO and it worked perfectly!!
Comment #13
mcfilms CreditAttribution: mcfilms commented@claudiuceus
Nice work. Well documented and an easy fix. You probably saved me hours muddling around in css.
Thank you.
Comment #14
Marshcast CreditAttribution: Marshcast commentedThanks, 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?
Comment #15
ChrisLaFrancis CreditAttribution: ChrisLaFrancis commentedThanks, 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:
Comment #16
Fakos CreditAttribution: Fakos commentedThank you Claudiuceus. Post #8 worked like magic.
Comment #17
hamish_s CreditAttribution: hamish_s commentedThanks Claudiuceus - your advice and code still works, and is still helping others after 8 months.
Comment #18
isimgt CreditAttribution: isimgt commentedThanks Claudiuceus
Comment #19
nikiking CreditAttribution: nikiking commentedThanks Claudiuceus - the fix worked on my non-drupal site as well.
Comment #20
hamish CreditAttribution: hamish commentedClaudiuceus,
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
Comment #21
kingfisher64 CreditAttribution: kingfisher64 commentedI have the exact same issue as hamish.
I'm running omega theme 7.x-3.1 & superfish 7.x-1.8
Comment #22
Jeff Burnz CreditAttribution: Jeff Burnz commentedReally old thread, ask in the forum or that other themes issue queue etc.
Comment #23
rob8888 CreditAttribution: rob8888 commentedThanks Claudiuceus, works perfectly! Saved me a lot (more) troubleshooting.
Comment #24
deanflory CreditAttribution: deanflory commented#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 folderif you're using the Libraries module properly.Works with:
claudiuceus saves the day and night, and day!
Comment #25
madelyncruz CreditAttribution: madelyncruz commentedThis 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 :)
Comment #26
kingfisher64 CreditAttribution: kingfisher64 commented#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.
Comment #27
madelyncruz CreditAttribution: madelyncruz commentedThere 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; }
Comment #28
madelyncruz CreditAttribution: madelyncruz commentedI have tried this one and it works on IE7
eg.
#block-superfish-1 { text-align: center; }
ul#superfish-1 { display: inline-block; float: none; }
Comment #29
sjhuskey CreditAttribution: sjhuskey commentedI 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;}
Comment #30
madelyncruz CreditAttribution: madelyncruz commented#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.
Comment #31
ragavendra_bn CreditAttribution: ragavendra_bn commented#28 works on Chrome, FF and IE8 by putting it in sites/all/libraries/superfish/css/superfish.css
Comment #32
davidjmcq CreditAttribution: davidjmcq commented#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.
Comment #33
jshimota01 CreditAttribution: jshimota01 commentedClient 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."
Comment #34
liviokujur CreditAttribution: liviokujur commented#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;
}