-
Posts
-
I have installed a header widget & need it to show below the logo & menu on mobile view, can you help please
Hey Dave,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardThe website is on my local host, so I cant show you my issue.
I used the code to add a header widget from tutorial – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
I have the logo left & menu below.
I have the Header widget so it is to the right in the header, this is the CSS i have used so far
#header .widget {
right: 5%;
padding-top: 40;
position: absolute;
bottom: 0;
transform: translate;
z-index: 0;
}
#header .widget {
text-align:right;
padding:10px 10px;
}
#header_meta {
border: none! important;
}I want the header widget to show to the right of the logo on a desk top & below the logo & menu on smaller screens (tablets & mobiles)
Can you help with the code I need to use?
Thanks
Hi,
It will be difficult giving you accurate CSS if we can’t actually inspect the page in question, did you try changing the right value in your first CSS block?
#header .widget { right: 20%; padding-top: 40; position: absolute; bottom: 0; transform: translate; z-index: 0; }You could also try with pixel values.
Best regards,
RikardHi Rikard
Ah thanks it seems to be the Z number that was giving me the biggest headache.I have now got the header widget above the logo (please see screen shot https://www.dropbox.com/s/ygwwx3b46x5oodl/Header%20widget%20location.pdf?dl=0 ) how do I get it to sit to the right of the Logo on a PC & still be visible on a mobile device & not clash with the mobile menu?
Also if I set the logo is left & menu below, how can I space the logo off the left margin so I can evenly space the header widget to it’s right.
And how then do I get the menu to be centred, so the header is balanced.
Thanks for your time mate.
Dave
Hi Dave,
For centering the menu, try adding this css code:
#avia-menu { text-align: center; } #avia-menu li { float: none; display: inline-block; }As for the header widget just adjust the right and bottom positions and for mobile device you can use media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp Hope this helps.
Best regards,
NikkoHi Nikko
Thanks for that, however I don’t understand the w3schools website.Menu still sticks to left & not floating to the center!
I have played with the header widget & can get it to the right of the logo & above menu on desktop view.
However when you start to scroll the header widget is hard on top of the menu (no padding)
Also in mobile view the header widget clashes with the menu & logo.This is a pdf with screen shots – http://www.findnetsolutions.com/wp-content/uploads/2017/02/Header-widget-is-the-Book-Now-form.pdf
What is the code I need to use or change to fix this?
This is what I have so far.
functions.php
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}style.css
#header .widget {
right: 5%;
padding-right: 90;
padding-top: 0;
padding-bottom: 15;
position: absolute;
transform: translate;
z-index: 0;
}Hi,
It’s a bit hard to make the adjustment without seeing it. Can you give us temporary admin access and a link to your login page? so we can check this further. I’ll try to make changes and tell you the changes I did.
Cheers!
Nikkoon header you have i think three different possibilities to insert code to:
/********* the one you choose **********/
add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}/*********header widget area before**********/
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }/*********header widget area just right after main container starts **********/
add_action( 'ava_after_main_container', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }maybe it is better to choose one of the two other options
Hi
Thanks for that however still have alignment issues.
When I use
add_action( ‘ava_after_main_container’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}
The widget stays in the middle, middle of the header area on desktop view. Mobile view is OK it drops below Mobile. Regardless of what style.css I use.Then when I use
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}
The widget sits between the phone no/ social icons & logo on desktop & mobile view. However I am trying to get the header widget to sit to the right of the logo on desk top & then on mobile view have the widget sit either above the logo or below the menu.Just having an issue trying to achieve this.
Cheers
Dave
Hi Dave,
You can choose from the options given by Guenni and from there we can set it to absolute position, and adjust the left and top positioning. Also give us a link to your site so we can atleast see what you put in the header widget and try to give you css code to position it properly.
Best regards,
Nikko
- You must be logged in to reply to this topic.