Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header widget area for mobile/tablet
- This topic has 2 replies, 1 voice, and was last updated 10 years, 1 month ago by andym119.
-
AuthorPosts
-
February 23, 2014 at 9:17 am #92017andym119Member
Hi
I am still learning web design.
Currently my child theme does not have header theme support, I worked out the best thing for my multisite was to register a new widget area for the header and let users design their header by the header widget area.
My header already responds, but I would like if possible to have a new header widget area that comes into force when the screen gets to a certain size that replaces my current header widget area.
Does anyone know how I can do this.
I thought I could achieve doing something like this by doing:
Widget area for header 1 (for my current header widget):
genesis_register_sidebar( array( 'id' => 'header-widget', 'name' => __( 'Header', 'custom' ), 'description' => __( 'Use this widget area to upload your header image(s) / header content', 'custom' ), ) ); add_action( 'genesis_header', 'custom_header' ); function custom_header() { genesis_widget_area( 'header-widget', array( 'before' => '<div class="header-widget widget-area">', ) ); }
Register new header widget for smaller screens:
genesis_register_sidebar( array( 'id' => 'header-widget-phone-tablet', 'name' => __( 'Header (Phone & Tablet)', 'custom' ), 'description' => __( 'The header widget area for smaller screens, tablets and phones.', 'custom' ), ) ); add_action( 'genesis_header', 'header_widget_phone_tablet' ); function header_widget_phone_tablet() { genesis_widget_area( 'header-widget-phone-tablet', array( 'before' => '<div class="header-widget-phone-tablet widget-area">', ) ); }
Then in css
.header-widget-phone-tablet { display: none; } @media only screen and (max-width: 782px) { .header-widget-phone-tablet { display: inline; } .header-widget { display:none; } }
This doesn't work because the .header-widget-phone-tablet {display:none} removes both header widgets.
I have also tried hooking the second widget area in other positions such as genesis_after_header, but again putting .header-widget-phone-tablet {display:none;} removes all the content.
Is there a way of doing this?
Thanks in advance
February 24, 2014 at 1:53 am #92087andym119MemberI've seen on the forums you can add conditionals to widget areas, such as:
if ( ! is_home() ) return;
Is it possible to do something like this instead, that has conditionals for screen sizes, rather than use css to make the widget areas appear and disappear.
Just to update, both widget areas work completely fine but I would like 1 to display above 782px screen size width and then 1 to display below 782px screen size width.
February 24, 2014 at 10:28 am #92144andym119MemberI just got it to work.
I can use the display:none for one of the headers without both headers going. I just had to add
'after' => '</div>',
in both the header functions.
Most websites don't suggest including
'after' => '</div>',
for tutorials in creating a widget area, however studiopress tutorials includes it, I don't know what it actually does but it works perfect now. -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.