Home / Forums / You Theme Support / Menu Designs

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts

  • traubinger
    Participant

    Hi @acoda,

    could you please give me some tips how I could modify the appearance of the main header menu? There are only very limited options in the Customize Skins > Header section…

    I’d like to realize something like that: http://advance.imonthemes.com/demo1/

    Is it possible to do this with custom CSS or could you recommend a menu plugin to get more options?

    Thanks very much!

    Hi @traubinger

    Are you referring to the hover effect on the menu from the link you sent? This should be possible using custom CSS.

    UberMenu is a great option to have more control over your menu’s styles.

    Thanks!


    traubinger
    Participant

    Yes I do refer to the hover effect… unfortunately I’m not as firm in PHP so I cannot do it myself. Would it be possible to extract the CSS Code from the style sheet of the referred template?

    I will also have a look at UberMenu. Do I have to position it as a widget or is there any native support from YOU-Theme to UberMenu?

    Hi @traubinger

    There is no native support for Ubermenu for the theme. You should be able to coordinate with their support team if you plan to use them.

    Can you please send over your site URL so I can check if I can apply the correct CSS to it?

    Regards,


    traubinger
    Participant
    This reply has been marked as private.

    Hi @traubinger

    First, you must set your menu items colors first. Remove the background then set the link hover color under Appearance > Customize > Customize Skins > Header

    Once done, use this CSS to apply the top border on hover.

    
    #header-wrap.transparent.skinset-header #acoda-tabs > ul > li > a:hover{
    border-top: 2px solid #ffffff;
    }
    
    #header-wrap.transparent.skinset-header #acoda-tabs > ul > li > a{
        border-top: 2px solid transparent;
        -webkit-transition: border-top 500ms ease-in-out; /* Safari */
        transition: border-top 500ms ease-in-out;
    }

    Thanks!


    traubinger
    Participant

    That seems to work pretty well although the border will “fade in” instead of “swipe in” from the left like in the link above 🙂

    But could you please also give me the CSS for the elements in the sticky menu? The CSS you gave me just applies to the “regular menu” and not to to the sticky menu.

    Moreover: In the “Customize styles menu” you can set a “Main Menu” font size… this font-size also does not apply to the sticky menu!! I think this is a bug which you should hand over to the programmers! Can you also please supply the CSS to modify fon-size in the sticky menu?
    /Edit: I found the solution for that problem by myself: #header-wrap.stuck #acoda-tabs > ul > li {font-size: 1.1rem;}

    Thank you!

    • This reply was modified 5 months, 1 week ago by  traubinger.

    Hi @traubinger

    Can you please specify where you added the CSS I gave you as I do not see it under Custom CSS on Theme Options.

    I added more CSS that I got from https://github.com/IanLunn/Hover and the overline swipe effect now works upon hovering.

    Here’s is the the CSS:

    #header-wrap.transparent.skinset-header #acoda-tabs > ul > li.hvr-overline-from-left {
      display: inline-block;
      vertical-align: middle;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      box-shadow: 0 0 1px transparent;
      position: relative;
      overflow: hidden;
    }
    #header-wrap.transparent.skinset-header #acoda-tabs > ul > li.hvr-overline-from-left:before {
      content: "";
      position: absolute;
      z-index: -1;
      left: 0;
      right: 100%;
      top: 0;
      background: #2098D1;
      height: 4px;
      -webkit-transition-property: right;
      transition-property: right;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
    }
    #header-wrap.transparent.skinset-header #acoda-tabs > ul > li.hvr-overline-from-left:hover:before, #header-wrap.transparent.skinset-header #acoda-tabs > ul > li.hvr-overline-from-left:focus:before, #header-wrap.transparent.skinset-header #acoda-tabs > ul > li.hvr-overline-from-left:active:before {
      right: 0;
    }

    Thanks!


    traubinger
    Participant
    This reply has been marked as private.

    traubinger
    Participant
    This reply has been marked as private.

    The spacing was fixed by adding margin-top: 10px; into the 2nd code block from the last CSS I sent.

    For the submenu not working, I tweaked the CSS a bit and the submenu now works.

    Can you please check if everything looks good now?

    By the way, we do not normally support such customization and I just wanted to give this a shot. 🙂

    Thanks!


    traubinger
    Participant

    Of course this kind of support is beyond expectations and highly appreciated!
    But this code really produces some nice menus and perhaps you can integrate it as a standard feature in the future versions of YOU-theme?

    Thanks again!

    These do add some spice to the theme and I will forward this suggestion to the developer.

    If you have other issues, please don’t hesitate to contact us.

    Thanks!

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.