-2

I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.

Medshopi
  • 5
  • 1

2 Answers2

0

Remove 

position: absolute;

from line number 157 on style.css

Dev Kiran
  • 589
  • 7
  • 17
  • This solved my problem a bit. Thanks. Is there a way that I can increase the logo size using the same class. – Medshopi Feb 24 '17 at 09:04
  • remove the following lines also transform: translateY(-50%); */ /* -webkit-transform: translateY(-50%); */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); – Dev Kiran Feb 24 '17 at 09:19
0

Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.

You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example

.header-site nav {
    margin-left: 200px;
}

Output 1

enter image description here

You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.

enter image description here

Output 2:

enter image description here

Praveen Puglia
  • 5,577
  • 5
  • 34
  • 68