Sticky menu and site title problem

Hey there, I entered a CSS to have my menu sticky since the plain customization wasn´t working. But now my site title is hidden on the “About” and the “Contact” page.

By now my CSS looks like this:
.site-header.fixed {
position: fixed !important;
}
.site-header.float-header{
padding: 5px !important;
}
.admin-bar .site-header.float-header {
top: 32px !important;
}
.site-header.fixed.float-header #mainnav ul li {
margin-top: 10px;
}

And these are my sites:
http://freebirdnumberone.com/about/
http://freebirdnumberone.com/contact-2/

Can anyone help me with this?

*Oh and you might only see the problem with Firefox

Looks strange… here again:

http://freebirdnumberone.com/about/
http://freebirdnumberone.com/contact-2/

(and it is visible on Safari too)

Hello Julia,

Looks like you are using Front Page template for these pages. Please try to switch to Full width template.

Kind Regards, Roman.

Oh hey Roman,

I wish I could and I did so you can see what happens then.
–> The Social Media Icons from the bottom show up on the middle of the page and so far no one could help me fix that…

Oh it was even you who explaint it like that to me: “Social media bar is above footer because it is one of the page widgets, so it’s affected by all the pagging/margins of content area.”

Can you tell me what pagging/margins I´d have to change in order to make them stay at the bottom of the page? …

Hello Julia,

Here is the CSS code that will help you to fix it on your About page:

.page-id-532 #content,
.page-id-532 .container.content-wrapper,
#post-532 {
    padding-bottom: 0 !important;
}

.page-id-532 .entry-footer {
    display: none;
}

And this is for Contact page:

.page-id-559 #content,
.page-id-559 .container.content-wrapper,
#post-559 {
    padding-bottom: 0 !important;
}

.page-id-559 .entry-footer {
    display: none;
}

As you probably can already see, you can use it for other pages only by changing id.

Kind Regards, Roman.

Ok, that´s awesome, thank you!

And the other thing with is, if I put this in the CSS:

.site-header.fixed.float-header #mainnav ul li {
margin-top: 10px;
}

The space on the Blog page between header and site title looks fine but on the About and Contact page there is too much space.
If I delete it there is too less space on the blogpage but the About and the Contact page looks fine.
Is it also possible to tell this code to only “work” on the blogpage or can the blogpage be fixed differently?

You can “tell” the code above to “work” only on Blog page by using a parent class that is unique for Blog page. In this case it might be .blog class of body element. So you should get something like this:

.blog .site-header.fixed.float-header #mainnav ul li {
    margin-top: 10px;
}

I hope that it will help you.

Kind Regards, Roman.

hmmm. What does one has to do to get a such a parent class?
Do I have to put this code in a specific php document?

oh man this whole programming thing is like a planet, where you speak another language (which is even true) and it seems to be so far away that I feel like I´m never able to make a good landing on there… But I need to, because a good landing means a good website you know…

Yeah, it may take years to understand all that :slight_smile:

For now, please just try this CSS code:

.blog .site-header.fixed.float-header #mainnav ul li {
    margin-top: 10px;
}

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard -> Appearance -> Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

Kind Regards, Roman.