-
AuthorPosts
-
May 12, 2018 at 11:53 am #955675
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?
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.
Thank you!
May 13, 2018 at 12:25 am #955910Hey hackoffseries,
You can use the following solution
and add a widget where you can create that HTML after
Best regards,
BasilisMay 13, 2018 at 7:43 pm #956114Hi 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 #956256Hi,
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,
RikardMay 14, 2018 at 5:07 pm #956533Hi Rikard!
Thank you for your response.
I actually don’t see any code there, here’s what I see on my end.
Thanks!
May 15, 2018 at 8:15 am #956841Hi,
Oh, I see. Sorry about that, please try this instead:
https://kriesi.at/documentation/enfold/header/#header-widget-position
Best regards,
RikardMay 15, 2018 at 6:29 pm #957163Hi 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 #957272Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.