How align header logo and menu items with blog posts

Sparkling
1

Again, thank you for this amazing theme.

issue 1:
in ‘medium width’ my logo and menu items are alignment perfectly well.
However, in full screen width, the website logo is aligned to the left and the menu items too much to the right.

I want the left side of my logo to align with my blog posts all the time, and I want the right side of my menu items to align with the right side of my blog posts, just like it is in ‘medium width’ responsive layout .

website is Zakaria-t.nl

desired situation

issue 2:
I’d also like to align my menu items lower in the header bar or vertically center these

edit: I tried to do this with below css but it caused scroll bars to apear in mobile menu :stuck_out_tongue:

@media (min-width: 100px) {
.nav.navbar-nav {
float: center;
margin-top: 21px;
}

2

Hi @zakka89,

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

issue 1: in ‘medium width’ my logo and menu items are alignment perfectly well. However, in full screen width, the website logo is aligned to the left and the menu items too much to the right.

I want the left side of my logo to align with my blog posts all the time, and I want the right side of my menu items to align with the right side of my blog posts, just like it is in ‘medium width’ responsive layout .

I think you have confused no sidebar and full width layout here.

I visited your shared site and it seems you are using no sidebar layout and not full width layout so please make it full width layout. Please see the difference between them as shown in the attached screenshots.

issue 2: I’d also like to align my menu items lower in the header bar or vertically center these

I see them vertically aligned on your shared site as shown in the attached screenshot and it is also working fine on mobile devices.

Please advise.

Best Regards,
Movin

3

Thank you for your reply Movin. I managed to fix issue number 2 on my own.

About issue number 1:

I don’t want the full width layout. Posts are too wide for my tastes then. I also don’t want a sidebar. Please advise how to align both logo and menu to the blog posts.

4

Ok then 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

body.home #masthead .container {
    max-width: 780px;
}
5

That helped, thanks!

However, it only applies for maximized windows/largest window widths. There is one width a lever lower where the alignment is still done in the old style:
example

This occurs when the size of my browsers is roughly bigger than 50 percent of my screen(1920x200 monitor), until 75% of my screen (then the alignment is right again). Hope that helps.

6

To resolve it try using the below CSS code also.

@media (min-width: 992px)and (max-width: 1200px){
body.home #masthead .container {
    max-width: 670px;
}    
}
7

Thank you but that didn’t do the trick. I left the css code in, in case you wanted to check. I see no changes.

edit:

If I remove

body.home #masthead .container {
max-width: 780px;
}

then it does work correctly for half browserwidth, but then I am back to the old situation when in full browserwidth

8

It seems the provided CSS code is not working on your site due to CSS specificity issue.

To resolve the issue try using below CSS code instead of above.

@media (min-width: 992px)and (max-width: 1200px){
body.home #page #masthead .container {
    max-width: 670px;
}    
}
9

Thank you so much that did the trick!

<3

10

Ow wow :’)

It did the trick for the homepage, but not for my ‘about me’ page, ‘blog category’ page, and contact page :’)

11

To make it work for other pages just remove body.home from the above shared CSS code.

12

Sadly, didn’t do much.

This is the code I have from you know:

@media (min-width: 992px)and (max-width: 1200px){
#page #masthead .container {
max-width: 670px;
}

}
#masthead .container {
max-width: 780px;
}

Edit: oh wait I think it does!! Might have been a cache issue. :smiley:

Only problem now is that the ‘Designs’ page is also affected, which was the only page that was fine before, hehe.

13

You are most welcome here :slight_smile:

If you have more questions then to help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.