Align Header Image left with text on pages and blogposts

Sparkling
1

Hi.
I would like my header image/logo to be aligned on the left with the text in the pages and the blogposts (while the page menu in the header stays aligned right). For some reasons, it seems all messed up with percentages, logo centering, padding and margin.
My site is www §dot§ im pr o gly ce rin §dot§ de (leave out the §s and take real dots).
I have tried different CSS from the forum, but it doesn’t quite work.
The problem is that depending on the size of the browser window, the logo jumps around to the left or right. It is most terrible in a tablet-kind-of-width.
I would simply like to have it aligned to the left and stay there.
Is there code for both the header and the main content section where I can fill in a px number to absolutely, not relatively, define the margin or padding to the left? There seems to be some predefined number.
Sparkling is simple, but great, yet, alas, I cannot figure out that stuff.
Thanks for helping!

2

Hi @glycerino,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.site-navigation-inner.col-sm-12,
.navbar.navbar-default > .container {
    padding: 0;
}

Best Regards,
Movin

3

Hi, thanks you took the time!
It sadly does not quite fix it. In a medium sized browser, the logo jumps some pixels right, then too far left. It seems it is tied to the menu (?!) I have tried around with code in the customs area, the best I can come up with is this, since padding and width should be the same. But still…
Please help!

.header {
width: 100%;
}

.container.main-content-area {
width: 100%;
}
.container.main-content-area {
padding-left: 0px;
}

#site-logo {
text-align: left;
float: none;
padding-left: 0px;
}

4

Actually the problem seems in a medium sized browser view, the logo keeps an exact distance to the pages menu. That way the logo is pushed around to the left or to the right. I guess that could be the solution? Is the logo linked to the page menu in some fixed pixel padding?

5

Could you please share me the screenshots of the issue so that i can help you?

6

Here comes a number of screenshots in order of width…

7

Here comes a number of screenshots…

8

Here comes a number of screenshots… 3 (8 total)

9

Here comes a number of screenshots… (8 total)
(Sorry I overlooked the download-may-a-pics on the bottom ;-D )

10

…just having a mobile menu all the time would maybe also solve it?

11

We can’t align it exactly with the content text as you have made changes in the content width by developing custom CSS code.

Please remove the following custom CSS code from your site.

.container.main-content-area {
    width: 100%;
}

Then use below custom CSS code.

@media (min-width: 768px){
body.home .post-inner-content {
    padding: 0;
}
body.home .site-navigation-inner.col-sm-12,
body.home .navbar.navbar-default > .container {
    padding: 0;
}
}
12

Wow thanks. For the starting page, it works perfectly! Awesome!
But why won’t it work for the other pages and blog pages, they seem to follow a different design with more padding etc.
Does the new code only refer to the starting page?
My custom CSS now looks like below.
Thanks again for taking the time…

@media (min-width: 768px){
body.home .post-inner-content {
padding: 0px 0px;
}
body.home .site-navigation-inner.col-sm-12,
body.home .navbar.navbar-default > .container {
padding: 0px 4px ;
}
}

.container.main-content-area {
padding: 0px 0px;

}

#site-logo {
text-align: left;
float: none;

}

13

Yes the shared page is only for home page. To make it work on all pages try using the below CSS code instead of above shared.

@media (min-width: 768px){
.post-inner-content {
padding: 0px 0px;
}
.site-navigation-inner.col-sm-12,
.navbar.navbar-default > .container {
padding: 0px 4px ;
}
}
14

Thanks for all the help but is there a way to remove the images posted in this thread?

15

You are most welcome here :slight_smile:

I don’t have access to remove the images that you have attached.