CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Vladut
Vladut

Reputation: 657

How display first a navbar menu from another divs?

I have this situation, I have a menu navbar, but when I display in page another div covers my fixed menu navbar. My menu navbar is like:

<?php       
        if ( wp_is_mobile() )
        {
            echo <<<START
            <div class="navbar">
                <center>
                    <a href="javascript:history.back()"><i class="pfadmicon-glyph-255"></i>Back &nbsp;</a>
                    <a href="http://tradeordeal.com/dashboard/?ua=profile"><i class="pfadmicon-glyph-252"></i>Profile &nbsp;</a>
                    <a href="www.#.com"><i class="pfadmicon-glyph-221"></i>Messages &nbsp;</a>
                    <a href="http://tradeordeal.com/dashboard/?ua=newitem"><i class="pfadmicon-glyph-66"></i>Post an Ad &nbsp;</a>
                </center>
                </div>
START;
}
?>

and css:

.navbar{
    height: 4em;
    width: 100%;
    background: #2c3e50;
    font-size: 15px;
    padding-top: 20px;
    color: white;
    position: fixed;
    top: 100%;
    margin-top: -4em;
}

In first image I have menu navbar fixed in bottom position but when I scroll, it is covered by another div or images. I don't know why. I have my theme on wordpress:

enter image description here

enter image description here

I want to display my navbar first. Thanks

Upvotes: 1

Views: 61

Answers (1)

Mitesh Mynee
Mitesh Mynee

Reputation: 55

The code you provided seems to work just fine. Problem seems to be with the images' or post's CSS styles.

Try running the code snippet below:

.something {
  
}

.navbar{
    height: 4em;
    width: 100%;
    background: #2c3e50;
    font-size: 15px;
    padding-top: 20px;
    color: white;
    position: fixed;
    top: 100%;
    margin-top: -4em;
}
<div class="something">
<h1><center>Scroll down</center></h1>
<img src="https://i.sstatic.net/DrOyP.jpg">
</div>

<div class="navbar">
                <center>
                    <a href="javascript:history.back()"><i class="pfadmicon-glyph-255"></i>Back &nbsp;</a>
                    <a href="http://tradeordeal.com/dashboard/?ua=profile"><i class="pfadmicon-glyph-252"></i>Profile &nbsp;</a>
                    <a href="www.#.com"><i class="pfadmicon-glyph-221"></i>Messages &nbsp;</a>
                    <a href="http://tradeordeal.com/dashboard/?ua=newitem"><i class="pfadmicon-glyph-66"></i>Post an Ad &nbsp;</a>
                </center>
                </div>

Hope this helps. :)

Upvotes: 1

Related Questions