Tagged: header, logo, menu, navigation, widgets
-
AuthorPosts
-
June 19, 2017 at 2:12 pm #809773
Hi Kriesi Team,
Good Day!
Is it possible if the Logo is in the Left, Widgets are in the right, and Menu items are in the bottom?
I have tried the “Adding a widget area to the header” option but the widgets have been located at the bottom of the Menu. Please see the screenshot below.
What I want is, the Widget to be located along with the Logo Area then the Menu/Navigation will be on the bottom. Please see the demonstration below.
I am looking forward to your reply.
Thanks! :)June 19, 2017 at 2:16 pm #809777what code snippet do you use to create the header widget area?
Edit : if you are not happy with the behavior on responsive case with your solution ! give this a try:
this is a bit different hook point on enfold
this to functions.php of your child theme:add_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }
and this to quick css:
#header_main .widget { float: right !important; padding: 10px 0 20px; width: 30%; } #header_main .textwidget { line-height: 24px; } @media screen and (max-width: 768px) { #header_main .widget { float: left !important; width: 100% } }
the widget will be a direct adjacent to logo container – and in responsive case it is under the Logo
- This reply was modified 7 years, 6 months ago by Guenni007.
June 19, 2017 at 2:24 pm #809781Hi Kriesi Team,
Good Day!
I solved it on my own. :)
This is the solution:
If you are wanting to add a widget area to your header then add this to the bottom of your functions.php file.
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }
And then navigate to Dashboard > Appearance > Widgets and create a new widget area named header and add some widgets to it.
Lastly, add this to Quick CSS (at the bottom of Dashboard > Enfold > General Styling)
#header .widget { left: 70%; padding-top: 0; position: absolute; top: 20px; transform: translate(-50%); z-index: 999; }
Hope other users found this useful. :)
Thanks!Best Regards,
Daryl Malibiran
Web DesignerJune 19, 2017 at 2:29 pm #809787Hi Daryl,
Thank you for sharing the solution you found! We appreciate it.
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
Thank you for using Enfold!
Cheers!
Sarah -
AuthorPosts
- The topic ‘Logo Left, Widget Right, Menu Bottom’ is closed to new replies.