Is there a way to overlap or float a logo over my block

hitched · February 6, 2017

How can I write some css so I can have my logo pinned and float in place over my head section that contains my nav bar
I know I can put logo in the head section but this makes my head block expand.. I don't want this. I would like to have Logo overlap the head in the same spot scrolling content under.

fixed relative absolute... I just don't know what widget to refer too.

Is there a way? cheers

Hikin' Mike · February 6, 2017

We need a link to your site. Since you're new, you can't post "live links", but you can remove the http:// part and that should work.

Also you can use one of the web tools to inspect your CSS. I use Firebug for Firefox.

hitched · February 6, 2017

I'm using Safari to inspect code that's easy but my problem is all these widgets smugmug uses. I don't know how to access the header

currently to experiment I'm using an image in a html block. It's probably not correct but how can I do this the proper way and also have my logo resize for mobile so it doesn't cover the menu on mobile..
What I'd like to see is my logo overtop the menu/header block or in the header block if possible overlapping like it is now and resize for mobile. The problem I was having is when putting logo into header, it resizes the white block to the logo size... I don't want that.

<img class="logo1" src="photos.smugmug.com/Design/i-8rkZc2s/0/O/logo274.png" >
.logo1{
position:relative;
z-index:1000;
max-width:150px;
height:auto;
top:-55px;
left:20px;
}

cheers in advance

Hikin' Mike · February 6, 2017

Try this instead:

.logo1 {
    height: auto;
    left: 20px;
    max-width: 150px;
    position: absolute;
    top: -55px;
    z-index: 1000;
    }   

@media only screen and (max-width: 480px) {

    .logo1 {
        max-width: 75px;
        top: 0;
        left: 10px;
    }

}

hitched · February 6, 2017

Thank you that works perfect!!!!

can I ask about problem with footer or do I have to start a new post for this?

Hikin' Mike · February 7, 2017

Fire away...

Is there a way to overlap or float a logo over my block

Comments