Forums

div over another div - Need to put logo over header image

Permalink
Hi
Im trying to put a logo over header image. See attached for design. This is what im up to using bootstrap theme:http://coffsweb.com.au/boot/

Image disappears in mobile view. Also I want logo to scroll with the rest of the page.

Here is the code I have added to header (found randomly and just pasted):

<style>@import url('http://getbootstrap.com/dist/css/bootstrap.css');

#landing-header {
border: 3px solid white; /* New */
}
.landing-header-media {
padding-left: 0; /* New */
padding-right: 0; /* New */
}
#landing-header .landing-header-content {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0px; /* Changed Value */
padding: 0px;
left: 0px; /* Added */
right: 0px; /* Added */
}
#landing-header .landing-header-content p {
color: white;
}
#landing-header .landing-img {
width: 100%;
/* border: 3px solid white; */
position: relative; /* Added */
}</style>

1 Attachment

johnkidd
 
Svdb87 replied on at Permalink Reply
Hello!

It seems like your issue is within "bootstrap-overwrites.css". On line 1801 it says:
@media (max-width: 767px)
.navbar-inner {
max-height: 340px;
overflow-y: auto;
overflow-x: hidden;
}

The overflow-y and overflow-x values hide the logo within the nav bar, thus causing it to disappear...

Hope this helps!
carli replied on at Permalink Reply
I'm afraid placing the logo in the fixed navbar section will not work.
You will need a little template and css editing: Better place your big header pic inside a div, your logo in another div and arrange both with position and z-index.

Regards
johnkidd replied on at Permalink Reply
johnkidd
Hi

Has fixed that problem. thank you. A few more issues... logo goes down when user scrolls down. I was also unable to make logo responsive. added img-responsive to logo.php. Is there anyway I could just pay you to fix it up for me?
carli replied on at Permalink Reply
Try this:

First do not place the logo in the navbar section.
Then place two stacked divs where you want to have the header pic with logo:

<div id="outer"><img src="(your path to) header-design.jpg" class="img-responsive">
<div id="inner" >
<div class="row">
<div class="col-xs-5 col-sm-8 col-lg-12"><img src="(your path to) logo-and-seal.png" class="img-responsive"></div>
<div class="col-xs-7 col-sm-4 col-lg-0"></div>
</div>
</div>
</div>


Then a little css:

<style type="text/css">
<!--
#outer {
   position:relative;
   z-index:1;
}
#inner {
   position:absolute;
   width:auto;
   height:auto;
   z-index:10;
   left: 0px;
   top: 0px;
}
-->
Viewing 15 lines of 16 lines. View entire code block.


Should work.
You can play with col in the grid system for responsive logo and left /top for logo positioning

Regards
lyndaeldo replied on at Permalink Reply
Check this one....div position above and inside another div

http://www.corelangs.com/css/box/divindiv.html...

Lynda