Centering Menu

Store Builder Questions
1

Hi,

How to set center main menu?

[url=“http://zlocisto.pl/”]http://zlocisto.pl/[/url]



Please help,



Best regards

Bartek

2

Hello.



Need to add a parent div for ul element([color=#262626][font=arial, sans-serif][size=3]blocks/topmenu_dropdown.tpl) [/size][/font][/color]with .menu-wrap class with following css styles:



[color=#262626][font=arial, sans-serif][size=3].menu-wrap {
background: #666;
}[/size][/font][/color]



[color=#262626][font=arial, sans-serif][size=3]Also need to add following css styles:



.menu-wrap .ty-menu__items.cm-responsive-menu{
max-width: 635px;
margin: 0 auto;
}




Thank you.[/size][/font][/color]

3

hi,



please modify file design/themes/responsive/css/styles.less and update the following styles:


.ty-menu__items {
background: @menu;
position: relative;
.clearfix();
.rounded_corners(6px);
margin: 0 auto;
display: table;
}
.top-menu-grid {
background: #666;
padding: 0;
margin-top: 40px;
}


and new style after “.ty-menu__items”:


@media (max-width: 767px){
.ty-menu__items {display: block}
}




p.s. don't forget to clean up the browser and template cache to see the change



best regards,

WSA team

4

[quote name='Damir (WSA-team)' timestamp='1433928591' post='218153']

hi,



please modify file design/themes/responsive/css/styles.less and update the following styles:


.ty-menu__items {
background: @menu;
position: relative;
.clearfix();
.rounded_corners(6px);
margin: 0 auto;
display: table;
}
.top-menu-grid {
background: #666;
padding: 0;
margin-top: 40px;
}


and new style after “.ty-menu__items”:


@media (max-width: 767px){
.ty-menu__items {display: block}
}




p.s. don't forget to clean up the browser and template cache to see the change



best regards,

WSA team

[/quote]



It's working!

THX

Bartek

5

you are welcome, Bartek!



best regards,

WSA team

6

hi,

please modify file [b]design/themes/responsive/css/styles.less [/b]and update the following styles:

.ty-menu__items {
    background: @menu;
    position: relative;
    .clearfix();
    .rounded_corners(6px);
    margin: 0 auto;
    display: table;
}
.top-menu-grid {
    background: #666;
    padding: 0;
    margin-top: 40px;
}
and new style after ".ty-menu__items":
@media (max-width: 767px){ 
   .ty-menu__items {display: block}
}
p.s. don't forget to clean up the browser and template cache to see the change

best regards,
WSA team

Hi,

I need to center my main menu too, and I tried your suggestion. It works in centering the menu, but it changes my page width to fixed and after doing it I can't change it back to what I had before. I can't even change the page width in Layouts/main/properties... it doesn't work!

Is there a way to center the menu, maintaining the page width settings?

Thank you,

Ines