XF 2.2 How to move logo within the width of the screen (not the forum width)

[sam2019]

I am trying to move the logo further to the left outside the boundaries of the forum itself.
How is that possible.

Forum list

Royal Enfield Himalayan, Scram and new 350s Forum

forum.himalayan-tools.com

 

[philmckrackon]

Like this?


Place in extra.less

// Header Padding Inclding Logo
.p-header-content
{
    padding: 0px 0px;
}

// Move Logo Over to Left by 20px Which is Borer Width - adjust if needed
.p-header-logo {
    position: relative;
    left: -20px;
}

 

[Davyc]

I would also add background-size: cover; to your header background CSS, so it looks good on larger screens otherwise it repeats and looks messy:

.p-header {
    color: #dedede;
    background: #142734 url(data/assets/style_properties/header-road-1900-72-cropped.png);
    height: 211px;
    background-size: cover;
}

If you're adding this to your extra.less and the full code is not in there (i.e. you customized it) you can strip everything out and just put this in your extra.less file:

.p-header {
    background-size: cover;
}

 

[Mr Lucky]

I would use an absolute position as I think it might work better with different widths of browser window:

.p-header-logo

{position:absolute;
left:0px;}

or whatever px to suit
@sam2019 your logo is nice but doesn't work on mobiles too well

EDIT: Oops - typo fixed

 

[GW2]

I would also add background-size: cover; to your header background CSS, so it looks good on larger screens otherwise it repeats and looks messy:

Where exactly is the header background CSS located?

 

[Davyc]

Where exactly is the header background CSS located?

The code I provided goes into your extra.less file - any CSS amendments you make should go into this file rather than messing with the original code file.

 

[GW2]

The code I provided goes into your extra.less file - any CSS amendments you make should go into this file rather than messing with the original code file.

Thank you. It works!

 

[Mr Lucky]

Where exactly is the header background CSS located?

Thank you. It works!
View attachment 298019

You can also put those things directly into the style property relevant section. Not sure why but I just find it more organised, neater and easier to find as extra.less can get a bit busy.