[Support request] Glitchy header

[Francesca]

Hi,

My header on https://www.hangoverbirreria.it/prova-pagina/ is very glitchy when loading. It loads on the right, then go up, then go left and then center. Very strange and not so good to see.

Is there something i can do about it?

It’s glitchy on mobile too. It first displays the toggle, then add the “menu” text, and the display them in the correct space.

[Leo]

Hi there,

Where are you adding the CSS?

I believe that’s because it’s loading in the footer.

[Francesca]

I added CSS by Site origin CSS.
This is my code

a img {
position: relative;
z-index: 1;
}

button.menu-toggle::before {font-size:25px;}
button.menu-toggle {margin-left: 50%;}
span.mobile-menu {font-size: 35px; font-variant: all-petite-caps;}

nav#site-navigation.main-navigation {border-bottom: 0px solid black!important;}

#site-navigation.main-navigation {
height: 113px;
background-color: #f0a800;
}

.alignnone.size-full.wp-image-160 {
padding: 0px;
padding-top: 0px;
margin-top: 0px;
top: 6px;
position: relative;
}

.alignnone.size-full.wp-image-162 {
position: relative;
top: 7px;
}

.alignnone.size-full.wp-image-159 {
position: relative;
top: 7px;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
background-color: black;
}

.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a::hover {
background-color: black;
}

@media only screen and (max-width: 770px) {
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 55%;
margin-left: -130px;
}

.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover {
background-color: black!important;
}
}

@media only screen and (max-width: 770px) {
img.header-image {
width: 30%;
height: 30%!important;
}

button.menu-toggle {
margin-top: -25%;
}
}

body {
background-color: black;
}

@media only screen and (max-width: 1024px) {
.main-navigation .main-nav ul li a,
.menu-toggle,
.main-navigation .mobile-bar-items a {
font-size: 19px;
}
}

.alignnone.size-full.wp-image-394 {
position: relative;
top: 6px;
}

.alignnone.size-full.wp-image-380 {
position: relative;
top: 6px;
}

.alignnone.size-full.wp-image-396 {
position: relative;
top: 6px;
}

a:hover {
color: #efa800;
}

.elementor a {
color: #ffffff;
}

nav#site-navigation.main-navigation {background-color: black!important; border-bottom: none;
}

section.elementor-element.elementor-element-7531c0a.elementor-section-stretched.elementor-section-boxed.elementor-section-height-min-height.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section {border-top: 3px solid #f0a800; }

.elementor-21 .elementor-element.elementor-element-702a53b,
.elementor-47 .elementor-element.elementor-element-de512e7,
.elementor-43 .elementor-element.elementor-element-9a721f4,
.elementor-49 .elementor-element.elementor-element-3747b14
{border-top: 3px solid #f0a800;}
.site-header {
display: none;
}
.main-navigation li {
vertical-align: middle;
}

.main-navigation .main-nav ul li.centered-navigation-logo a {
padding: 0;
line-height: 0;
margin: 0 30px;
}

.main-navigation .main-nav ul li.centered-navigation-logo a:hover,
.main-navigation .main-nav ul li.centered-navigation-logo a:focus {
background: transparent;
}

.slideout-navigation .centered-navigation-logo,
.main-navigation.toggled .centered-navigation-logo {
display: none;
}

@font-face {
font-family: Sugo;
src: url(/wp-content/themes/generatepress_child/fontssugo.otf);
}

nav#site-navigation.main-navigation {
padding-top: 18px;
padding-bottom: 8px;
border-bottom: 5px solid #f7e800;
}

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
content: “”;
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

display: block;
width: 0;
height: 2px;

background-color: #f0a800;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 60%;
}

Thank you so much

[Leo]

Can you try one of these methods?
https://docs.generatepress.com/article/adding-css/

If not you will have to check with Site Origin CSS.

[Author]

Posts