Menu not resizing well on mobile/smaller screen

[CSKickOn]

Hello,

on http://www.kickon.com when the screen is greater that 1024px wide, things look good except the logo does not seem to be perfectly centered vertically in the menu banner header orange bar?
Otherwise it is fine.

As soon as I make the window less than 1024px wide, the menu text buttons drop below the logo and align left… and it makes a really fat menu bar header even though there is plenty of space to fit the text and keep it justified right.
It just looks off.
I have tried to fix it with custom CSS but everything breaks.
Also, when you hover over the menu text in this middle state, the hover background is not sized correctly and covers the logo…

Once you move less than 768px things change to a mobile view, which is perfect and fine. Note that in this view, the logo is perfectly centered vertically….

Is there a way to stop a) this spill over when having a width between 768pm and 1024px? b) center that logo vertically when in any other view except mobile view c) fix the menu hover effect?

thank you for your time an help

P.s. this really is a fantastic theme!!!! 🙂 these fixes are just polishing touches

[CSKickOn]

Also, I forgot to add, that when you scroll down and the menu header section squashes … on a screen width greater than 1024px things look good (see attached pic) … but once in that middle state less than 1024px and greater than 786px wide the menu text justifies left and the height of the menu header changes and nothing fits nicely (See menu6 attachment)….

Thank you

[CSKickOn]

Hi Guys – hoping to get a response to this….
Thank you

[Veena]

Pls try following custom CSS in themeoptions-

@media screen and (min-width: 768px) and (max-width: 1024px){
#site-logo{
display: inline-block;
float: left;
top: 20px;
}}

@media screen and (min-width: 768px) and (max-width: 1024px){
#primary-menu{
display: block;
float: right;
margin-right: 0;
padding-top: 15px;
}}

[Author]

Posts