CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Matei Panchios
Matei Panchios

Reputation: 333

Placing navbar on top-right side of header image (Bootstrap)

I'd like to add a menu on top of a header image, the menu should be in the top-right side of the header (over the header).

Here is the code:

    <div class="container-full">
        <img src="images/header_01.png" style="max-width:100%; height:auto;"/>
            <div class="navbar navbar-default">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Acasa<br />Bine ati venit!</a></li>
                    <li><a href="#">Despre noi<br />Descriere si misiune</a></li>
                    <li><a href="#">PRODUSE<br />Produsele noastre</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="#">PHOENIX GRUP<br />Membri</a></li>
                    <li><a href="#">PORTOFOLIU<br /> Lucrari executate</a></li>
                    <li><a href="#">Contact<br />Contact</a><li>
                </ul>
            </div>
    </div>

Here is the fiddle: https://jsfiddle.net/8ovdwpub/

Here is the mockup: http://tinypic.com/view.php?pic=qz5f6q&s=8#.VdWiQvR0Ygk

I tried looking on StackOverflow but couldn't find anything. How can I achieve the desired effect?

Upvotes: 0

Views: 1566

Answers (1)

Andrea Salicetti
Andrea Salicetti

Reputation: 2483

This can be a good starting point

HTML

<div class="container-full">
    <div class="navbar navbar-default" id="tr-navbar">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Acasa<br />Bine ati venit!</a></li>
            <li><a href="#">Despre noi<br />Descriere si misiune</a></li>
            <li><a href="#">PRODUSE<br />Produsele noastre</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#">PHOENIX GRUP<br />Membri</a></li>
            <li><a href="#">PORTOFOLIU<br /> Lucrari executate</a></li>
            <li><a href="#">Contact<br />Contact</a>
                <li>
        </ul>
    </div>
    <img id="img-header" src="http://i60.tinypic.com/4v1z4p.jpg" style="max-width:100%; height:auto;" />
</div>

CSS

#tr-navbar {
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 2;
  background-color: transparent;
  border: 0;
}
#img-header {
  position: absolute;
  top: 0;
}

Have a look at the fiddle

Just beware of responsiveness...

Upvotes: 2

Related Questions