[Support request] Glitchy header

Home Forums Support [Support request] Glitchy header

Home Forums Support Glitchy header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #632539
    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.

    GP Premium 1.6.2
    #632673
    Leo
    Staff
    Customer Support

    Hi there,

    Where are you adding the CSS?

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

    #636004
    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

    #636165
    Leo
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.