- This topic has 3 replies, 2 voices, and was last updated 5 years, 9 months ago by Leo.
-
AuthorPosts
-
July 25, 2018 at 8:23 am #632539Francesca
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.
July 25, 2018 at 11:51 am #632673LeoStaffCustomer SupportHi there,
Where are you adding the CSS?
I believe that’s because it’s loading in the footer.
July 30, 2018 at 7:30 am #636004FrancescaI added CSS by Site origin CSS.
This is my codea 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
July 30, 2018 at 8:55 am #636165LeoStaffCustomer SupportCan you try one of these methods?
https://docs.generatepress.com/article/adding-css/If not you will have to check with Site Origin CSS.
-
AuthorPosts
- You must be logged in to reply to this topic.