[Resolved] Issues with the top bar and menu after recent update

[Nimie]

The font is now italics and different weight in both the menu and top bar. Alignment is also off. This is only on the blog page and on the posts.

[Tom]

Hi there,

The site you linked to isn’t using GeneratePress.

Let me know 🙂

[Nimie]

You may still be seeing the old version. I just launched it today. It may not have fully resolved DNS. IP is 37.60.255.210 if that helps

[Tom]

Aha, in your typography settings, you only have the italic variant selected for the Roboto font. If you add another (non-italic) variant, it should fix the issue.

[Nimie]

Ok that worked but the top bar is showing differently than the other pages. I have fa-phone added and the widgets all display even. But the blog is still off.

[Tom]

That’s definitely strange – have you added any custom CSS to the site?

[Nimie]

Yes, but what is weirder is that it was all working fine before I moved it out of a subdomain and then updated the gp pro. Even the italics issue was not showing.

Here is the custom code and it is the same on the subdomain where i built it.

.inside-top-bar .textwidget {font-size:16px !important; margin: 0px 0px 15px 0px !important;}
.fa-fw{ font-size:18px
!important;
}
.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 8px !important;
margin: 20px 13px 0px 20px !important; float:right;
}
@media (min-width:769px)
{.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 8px !important;
margin: 35px 40px 0px 25px !important; float:right;
}

@media (min-width:769px) {
.inside-top-bar .textwidget {
padding: 0px 0px 0px 140px !important;
}
}
.db-flex-align .elementor-widget-wrap {
display: flex;
flex-direction: column;
}
.db-align-bottom {
margin-top: auto;
}
.page-header-content-container{
font-family: Cinzel; font-size: 32px; font-weight: 600;}

div.wpforms-container-full .wpforms-form input[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color:#ffb528; /* orange background */
border: 2px solid #ffb528; /* Border thickness, line style, and color */
color: #fff; /* Text color */
font-weight:bold;
letter-spacing: 3px;
padding: 5px 9px 5px 9px;
box-shadow: 5px 5px 10px 0px rgba(84,89,95,0.5)
}
.wpforms-form button[type=submit]:hover {
background-color: #000 !important;
}
.entry-content li{
margin: 25px 0;
}
}

[Tom]

Does the issue go away if you temporarily remove that code?

Is there any caching you can clear now that you’ve moved the site? Perhaps there was caching before that cleared which would explain the change?

The latest GPP update didn’t have anything to do with the top bar, as that’s in the free theme.

Let me know 🙂

[Nimie]

If i remove the code the top bar no longer is aligned at all. It is only the html widget that is a problem. There is no cache on the site at all. I just can’t understand why only the blog and post pages?

[Nimie]

I tried removing the code and it still is stuck to the top. I have a screenshot if that helps.

[Tom]

Ah I see – your phone icon has a padding-top: 50px applied to it.

However, Font Awesome is only added thanks to Elementor, which isn’t loading on your blog page. So the icon never loads, which means the 50px isn’t added.

You can try adding Font Awesome site-wide using a plugin like this: https://en-ca.wordpress.org/plugins/better-font-awesome/

[Nimie]

Ah, wonder why it worked before i moved it?? That worked perfectly, thank you so much for your patience and effort.

[Tom]

You’re welcome! 🙂

[Author]

Posts