Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 12, 2018 at 11:53 am #955675
    Archie

    Hi there Enfold team!

    I hope you can help me with

    Can you suggest/recommend any technique using Enfold’s features, to achieve this look?

    https://prnt.sc/jgwnjk

    At the moment, I just embedded an image in there. Would be great if I can re-create that look with Enfold’s features, instead of just using an image.

    https://prnt.sc/jgwnj5

    Thank you!

    May 13, 2018 at 12:25 am #955910
    Basilis

    Hey hackoffseries,

    You can use the following solution

    Header

    and add a widget where you can create that HTML after

    Best regards,
    Basilis

    May 13, 2018 at 7:43 pm #956114
    Archie

    Hi Basilis!

    Thank you so much for your response.

    I’m really sorry but I don’t really follow this? Can you elaborate please?

    I can’t seem to click anything? Is this an image?

    May 14, 2018 at 6:35 am #956256
    Rikard

    Hi,

    If you scroll up a bit on the link Basilis sent then you will see the code which goes into functions.php, which enables a widget in the header. Below that you see all the styling options you have at your disposal.

    Best regards,
    Rikard

    May 14, 2018 at 5:07 pm #956533
    Archie

    Hi Rikard!

    Thank you for your response.

    I actually don’t see any code there, here’s what I see on my end.

    http://prntscr.com/jhqq5u

    Thanks!

    May 15, 2018 at 8:15 am #956841
    Rikard

    Hi,

    Oh, I see. Sorry about that, please try this instead:

     https://kriesi.at/documentation/enfold/header/#header-widget-position

    Best regards,
    Rikard

    May 15, 2018 at 6:29 pm #957163
    Archie

    Hi Rikard!

    Thank you for this. I am a little confused with how to use the CSS code to position the widget to the right (Logo 1, Menu 2, Widget 3.)

    Can you please send me the correct code here? Thanks!

    May 16, 2018 at 3:03 am #957272
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - Header widget */

.container.av-logo-container .inner-container {
    display: flex!important;
    background: #eee;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap:wrap;
}

#top #header .logo,
#top #header .main_menu,
#top #header .widget {
   position: relative;
}


/* Logo */
#top #header .logo {
    background: #ffdd00;
    order:1;
    /*flex-grow: 1;*/
}


/* Menu */
#top #header .main_menu {
    background: #0099e5;
    order:2;
    /*flex-grow: 2;*/
}


/* Header widget*/
#top #header .widget {
    background: #34bf49;
    padding: 0;
    order:3;
    /*flex-grow: 1;*/
}

/* Header widget Breakpoint */
@media only screen and (max-width: 850px) {

   .container.av-logo-container .inner-container {
        display: block !important;
    }
    #top #header .logo {
        display: inline-block;
    }
    /* Menu */
    #top #header .main_menu {
        display: inline-block;
        float: right;
    }
    #top #header .av-main-nav-wrap {
        float: right;
    }
    #top #header .widget {
        margin-top: -40px;
    }
}

/* End CSS */

    Best regards,
    Vinay

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