Forgot your password?   No account Yet? Register
swMenuPro Logo
Advanced Menu System for Joomla
Board index swMenuFree Forum swMenuFree 8.0+ support forum How to make Superfish menu to align center in swMenuFree

How to make Superfish menu to align center in swMenuFree

Please post all question regarding swMenuFree 8+ to this forum.

gmuser Newbie
Newbie

Posts: 25

I'm using Joomla 3.6.

Superfish is a CSS menu system in swMenuFree that is compatible with current versions of Joomla. Superfish is also responsive, in that it will stack as needed to accommodate narrow window sizes on mobile devices.

The problem I found was that Superfish menu always aligned to the far left side of the browser window. I found a solution that I posted on the swMenuPro forum, which swMenuFree people could not see. So, I'm posting the solution again here.

This worked for me. After you get the menu just the way your want it, then manually edit the CSS. swMenuFree control panel has a place to click and manually edit the CSS.

Change CSS from:


#sfmenu164 { <--- your number may be different. This is at the top of the CSS page.
position: relative;
<--- other stuff that you do not change.
}

To:
#sfmenu164 {
text-align: center;
<--- other stuff that you do not change.
}

Then search the CSS page for the word "float". It should only appear once under something like: .sf-menu li

Delete:

float: left;

and replace it with:

display:inline-block;


Now you can save and apply. Note that if you make any other changes through the swMenu control panel, it will overwrite this, and you will have to do this again.

I found this solution at: https://www.prestashop.com/forums/topic ... to-center/

gmuser Newbie
Newbie

Posts: 25

Update to get the details correct.

This worked for me. After you get the menu just the way your want it, then manually edit the css.

At the top of the CSS page, find:

#sfmenu164 {  Your number maybe different
padding-top: 2px ;
padding-left: 16px ;
background-image:none ;
position: relative;
top: 0px ;
left: 0px;
}

Replace
position: relative;
with
text-align: center;


And find:

.sw-sf164 li {  Your number maybe different. There is only one “float” word.
float: left;
position: relative;
},

replace
float: left;
with
display: inline-block;


Now you can save and apply. Note that if you make any other changes through the swMenu control panel, it will overwrite this, and you will have to do this again.

I found this solution at: https://www.prestashop.com/forums/topic ... to-center/

jeni606 Newbie
Newbie

Posts: 1

We are here at your service all the time to help you with the best and suitable Paper Writing Service maintaining the exact format that you require.


Return to swMenuFree 8.0+ support forum

cron