Archived topic
Glitchy header
3 replies · Started by Francesca on July 25, 2018
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.
Hi there,
Where are you adding the CSS?
I believe that's because it's loading in the footer.
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
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.
