CODEWITHSUNDEEP
htmlcss
Nikola Marinov
Nikola Marinov

Reputation: 263

Navigation Bar covers other elements

today i have following problem i have responsive navigation Bar that covers my website logo enter image description here

In that case i cant click on my logo i mean i cant use <a href ..... Here is .mean-bar css

.mean-container .mean-bar {
    float: left;
    width: 100%;
    position: absolute;
    background: 0 0;
    padding: 20px 0 0;
    z-index: 999;
    border-bottom: 1px solid rgba(0, 0, 0, .03);
    height: 55px;
}

I tried to add margin-left but i lost responsive. I want to reduce size (width) of my mean-bar without lose resposive Sorry for bad English.

Upvotes: 0

Views: 475

Answers (2)

Sabrina L.
Sabrina L.

Reputation: 62

If your .mean-bar has z-index: 999, your logo should have z-index: 1000.

If it doesn't work might be good to share a link to the site you're working on.

Update, add this in your CSS:

.main-responsive-nav .logo {
z-index: 1000;
max-width: 200px; }

".main-responsive-nav" class should be added so that it will only affect the .logo class when viewing in mobile.

Upvotes: 1

Mansour Alnasser
Mansour Alnasser

Reputation: 5060

find out the logo div class or id and apply the CSS below

.logo-class {
    position: relative;
    z-index: 9990;
}

replace logo-class with your class

Upvotes: 1

Related Questions