Logo and Menu Postion

[Mary]

Mary

November 10, 2016 at 3:25 am

Hi there!

I’m using Virtue Premium on my site at mytrojan.co. I have a wide logo: 600 x 200 pixels. I’ve added the following CSS that I think may be causing some of the issues I have:

/*Increase Logo Div*/
div .logocase {
width: 600px;
}

/*Decrease navigation width to accommodate wide logo*/
.col-md-8 .kad-header-right {
width: 500px;
}

The site looks fine on a desktop browser and on small mobile screens. However, at some points in between these sizes, before the mobile menu hamburger appears, the logo overlaps the navigation menu – you’ll need to resize your browser window gradually to reproduce this effect. Also when the hamburger does appear it is initially on the left before going to full width.

I’d like to reposition the primary navigation menu such that its below the logo – like the secondary menu in Virtue Premium 3 menu. When I set the my main menu (currently my primary navigation) to be secondary navigation I cannot see any menu at all.

How to I reposition my main navigation menu below my logo? How to I ensure that when the hamburger icon appears on smaller screens it is always full width?

Thanks!