Menu center vertical after making it bigger.

robinhager · September 2015

Hi Muffin,

I have a question after reading on your forum i have managed to make the fixed menu and sticky menu bigger including the logo. However now the menu items don't center. How can i fix this?

http://www.bebeezy.com/clients/bewebsites

Hope to hear from you.

Kindest regards,

Robin

Albert · September 2015

Hi Robin,

you can control top margin with below css:

.menuo-right #Top_bar .menu_wrapper { margin-top: 10px !important; }

robinhager · September 2015

Hi Muffin,

I tried your css but now when i scroll down it moves and when i want to select it the blue apears strange.

Kindest regards,

Robin

Albert · September 2015

Ok. We did not noticed that you use sticky header before. To keep them the same in both, please use below css instead:

.menuo-right #Top_bar:not(.is-sticky) .menu_wrapper { margin-top: 10px !important; }
#Top_bar.is-sticky .menu_wrapper { margin-top: 25px !important; }
#Top_bar.is-sticky .menu > li > a::after { bottom: -25px !important; }

robinhager · October 2015

Thanks so much it worked like a charm! Is it also possible to get the blue underlining more to the bottom or just skip the underlining?

Albert · October 2015

If you want to move blue underlining more to the bottom, you must use below css:

.header-fixed #Top_bar .menu > li > a::after {
    bottom: -20px;
}

robinhager · October 2015

Thank you for you respond, because when i use sticky header it moves when scroll down and then the blue goes up again. What can i do to make this stay the same?

Albert · October 2015

To do what you want, please use below css and this should help:

.menuo-right #Top_bar:not(.is-sticky) .menu_wrapper {
    margin-top: 0;
}
.header-fixed #Top_bar .menu_wrapper .menu > li > a {
    padding: 30px 0;
}

.header-fixed #Top_bar .menu > li > a:after {
    bottom: 0;
}



#Top_bar.is-sticky .menu_wrapper {
    margin-top: 0;
}
#Top_bar.is-sticky .menu > li > a, #Top_bar.is-sticky .menu > li > a span {
    line-height: 30px;
}
#Top_bar.is-sticky .menu_wrapper .menu > li > a {
    padding: 30px 0;
}
#Top_bar.is-sticky .menu > li > a:after {
    bottom: 0 !important;
}

robinhager · October 2015

Hi Muffingroup,

When i add this code it messes the menu up again. Also when i scroll down from top to center there is a strange jump in the page. How can i fix this?

Albert · October 2015

It messes the menu up because you used a lot of own css's and also you modified some theme files. Some of the css's we gave you above, you may got already in your css section so you must compare them, and if you got the same css, you should replace it with our code instead. Or at least, go back to original theme files and do not use own css's that are doing this mess. But if you don't want to do that, then unfortunately there is nothing what we can do on our side, because with your current changes it is just impossible to do what you want.

robinhager · October 2015

Hi Muffingroup,

The only thing i want is a sticky header 90px high wich will scroll down the page. The menu must be centered and the buttons as big as the header offcourse. Is this possible without the hickup?

The code i insert is what you gave me on top here can you make it work like i discribe please?

Hope you can help

Kindest regards,

Albert · October 2015

Sorry but with current custom css it won't be possible. We spent to much time on your site trying to do this but it is just impossible.

Thanks for understanding!

Menu center vertical after making it bigger.

Comments