Okay
  Public Ticket #831470
Nav menu CSS
Closed

Comments

  • Jesse started the conversation

    Hi - I'd like to adjust the CSS for the text elements in the pop up full screen nav menu.  Can't seem to get identification right with Chrome.  

    Also I'd like to remove the horizontal lines in the nav menu.  Please help.


    Thanks.

  •  1,974
    Support replied

    Hello,

    Best to inspect elements in chrome and preview their properties.

    There are several of them. Depends what exactly you need to change

    #overlay-menu .flexnav li,

    #overlay-menu .flexnav li a, 

    .flexnav li a

    The horizontal lines means the burger menu (3 horizontal lines)?  If yes, how will you be able to access the menu?

    Thanks


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Jesse replied

    Thanks - that helped.  Chrome seems to be having trouble identifying elements in the overlay menu..  

    I'm talking about the white horizontal lines that appear in the overlay menu at less than 1024px viewport.  I'd like to remove them.

    Also - I'd like to adjust the height of the containers for the #overlay-menu .flexnav li a - please identify.


  •  1,974
    Support replied

    try

    .flexnav li a {

    border-bottom: none;

    }

    and 

    #overlay-menu .flexnav li {

    line-height: 70px !important;

    }

    70px is an approximation

    Thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Jesse replied

    Thanks.  That helped.  Almost got it.  I'd like to add the CSS animations applied to the #pre-hero to the text elements in the overlay nav - but seem to be having some trouble with identification and/or syntax.  I tried this here below and didn't work.  Please advise how to fix.


    #overlay-menu .flexnav li a {
    -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.35s ease-in-out 0.1s;
    -moz-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.35s ease-in-out 0.1s;
    -o-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.35s ease-in-out 0.1s;
    -ms-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.35s ease-in-out 0.1s;
    transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity 0.35s ease-in-out 0.1s;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    font-size: 2em;
    letter-spacing: -0.08em;
    text-transform: capitalize;
    }
    #flexnav li a.hidden {
    opacity: 0;
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    }


  •  1,974
    Support replied

    add fade out animations to

    nav {

    ....

    }

    and fade in animations to

    .overlay-show nav {

    ....

    }

    thanks

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy