Possible to use Header without background image & padding on first page only?

andersgahlin

I'm trying to reduce the padding on the first page between the header and the page content but I can't seem to get it to work. I can switch on the "minimalist" option but that removes it globally and I only want to do this on the first page.

Is this possible?

Thanks

Albert

If you want to do this on one page only, then you can do this with custom css. If you will send us url to page where you want do this, we'll show you how.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

Thanks - http://www.gaahlin.com/alron/

Albert

Ok. So to remove content padding from this page only, please use below css:

.page-id-54 #Content { padding-top: 0 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

Perhaps I'm doing it wrong or was unclear in my wish but I used the custom CSS on the page in question but there is no change. I would like to have the background graphics go up behind the menu right to the corner. I can get this by turing on the minimalist option but then all other layouts becomes wrong since I want the padding on the other pages.

To show what I would like, if possible is to go from this (see screenshot) 

to this (see image) 

My apologies for being unclear.

Albert

Ok. So to do something like that, please use below css:

.page-id-54 #Content { margin-top: -60px !important; }

If above value won't be enough, then increase this -60px value.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

I worked when I used the value -160 but it also created a problem where it broke the responsive interface now lost half it's menu and logo in the top. If I turn this around, is there a way to turn on the minimalist option for the first page only? Or turn it on globally and pad the other pages. Not sure what is best but I know that turning on the minimalist option works for the first page at least. 

Albert

For responsive version it won't be possible. So what you can do is set this css for desktop devices only. And this can be done with below css:

@media only screen and (min-width: 1240px) {
    .page-id-54 #Content { margin-top: -160px !important; }
}

And this is all you can do in this case.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

Thanks a lot, that seems to do the trick

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

To put t simply, the code stopped working. What did I do wrong? 

http://www.alron.se

Albert

What stopped working exactly? We tried to open your site but we can't. There is password.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

Oh, you were that fast. I removed the password just after I posted this. The padding that you helped me remove came back and I seem to have missed something in my import of the code.

Albert

Looks like you change page ID and that's why above css does not work. The code we gave you above is per page. Your old page id was 54 but now is different.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

andersgahlin

Ah, obviously. Ok, thanks. Then I know I just need to change the page ID. Thanks again.

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next