Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1233972

    Hi!
    I need to build a couple of tabs in the header, just like this example.
    Is it possible to do it in any way?
    There is a version for desktop and mobile

    Thank you very much!

    #1234480

    Hey mtmundarain,

    You should be able to achieve something similar with custom CSS. We can help you out with edits problems if you should run into problems, if that should be the case then we need to be able to see the elements in question and know what you need help with.

    Best regards,
    Rikard

    • This reply was modified 1 week, 1 day ago by  Rikard.
    #1234512

    could this be a way you like – these are only styled top menus: https://webers-testseite.de/impressum/
    but i have no time now to style the responsive case on that.

    • This reply was modified 1 week, 1 day ago by  Guenni007.
    #1234814

    Guenni007
    Thanks!
    I’m going to check everything.
    Very grateful again

    #1234822

    Hi mtmundarain,

    Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1234911

    see again : https://webers-testseite.de/pureinstall/impressum/

    just create a top navigation on dashboard – menus ( do not forget to check on the bottom that field: “Enfold Child Secondary Menu ”
    then click on the link “Will be displayed if you selected a header layout that supports a submenu” you will be redirected to the header – header extra elements – Header Secondary Menu.

    then this comes to your quick css:

    /******** Tabs in top-menu *************/
    #header_meta.container_wrap {
        background-color: #000f36 !important;
    }
    
    .responsive #header_meta .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0;
        margin: 0;
    }
    
    #header_meta .sub_menu {
        padding: 0 10px 0 50px !important;
    }
    
    ul#avia2-menu {
        margin: 0;
        margin-top: 2px !important;
        padding: 0;
        height: 40px;
        float:left;
    }
     
    ul#avia2-menu li {
        list-style: none;
        float:left;
        padding: 0 1px !important;
        height: 40px;
        border: none !important;
        text-align: center;
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
     
    ul#avia2-menu li a,
    #top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a {
        border-radius:  20px 20px 0 0 !important;
        color: #fff;
        display: block;
        padding: 0 20px;
        text-align: center;
        text-decoration: none;
        line-height: 40px;
        background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
        background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
        -webkit-transition-property: background;
        -webkit-transition-duration: 700ms;
        -moz-transition-property: background;
        -moz-transition-duration: 700ms;
    }
    
    ul#avia2-menu li a:hover,
    #top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a:hover,
    ul#avia2-menu li.current-menu-item a,
    #top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a {
        opacity: 1;
        background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
        background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
    
    ul#avia2-menu li.current-menu-item a,
    #top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a,
    ul#avia2-menu li.current-menu-item a:hover,
    #top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a:hover  {
        background: #fff;
        color: #000 !important;
    }
    
    ul#avia2-menu li a:hover {
        color: #fff !important;
    }
    
    @media only screen and (max-width: 767px) {
       #header_meta .sub_menu {
           padding: 0  !important;
       }
    
        ul#avia2-menu li a {
            padding: 0 10px;
        }
    
       ul#avia2-menu {
           margin-top: 0 !important;
        }
    }

    i like this glooming hover effect – but you can change it to a background-color.
    that it has that tab feeling the active state ( current item ) should have the same color as header bg-color.
    On transparency header it is hard to find a similar effect.

    #1234912

    it will not be a good solution if you have a fixed and sticky header even on mobile view when in responsive case the next line is created.
    if this will be the case we had to find a different solution. This works til iphone5 (320px screenwidth)

    #1234989

    Guenni007
    Excellent solution!
    I congratulate and thank you!

    #1235302

    Hi,

    Thanks @guenni007 for helping out :-)

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.