Header widget area for mobile/tablet

Community Forums Forums Design Tips and Tricks Header widget area for mobile/tablet

This topic is: resolved

This topic contains 2 replies, has 1 voice, and was last updated by  andym119 6 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #92017

    andym119
    Member
    Post count: 72

    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

    • This topic was modified 6 months, 4 weeks ago by  andym119.
    • This topic was modified 6 months, 4 weeks ago by  andym119.
    #92087

    andym119
    Member
    Post count: 72

    I’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.

    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
    #92144

    andym119
    Member
    Post count: 72

    I 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.

    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
    • This reply was modified 6 months, 3 weeks ago by  andym119.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.