Only show sidebar on mobile?

Community Forums Forums Design Tips and Tricks Only show sidebar on mobile?

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  healthydelish 1 year, 5 months ago.

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

    healthydelish
    Participant
    Post count: 1

    I created a new sidebar above the header. Is there a way to style it so it only shows on the mobile/tablet version of my site? The desktop version has a sidebar down the side, so I don’t need it on that version but can’t figure out how to get rid of it.

    I’m using the runway child theme if that helps answer the question.

    #49125

    braddalton
    Participant
    Post count: 10674

    I wrote a post about this recently which includes a full list of conditional tags for mobiles as well as code snippets.

    WordPress already includes a conditional tag for mobiles[php]is_mobile[/php] which you can use to filter the function so it outputs your modifications.

    There’s also range of conditional tags you can use for mobiles by adding your own custom conditional tags for different types of mobile devices or installing a plugin like Mobble.

    You can also add another style sheet which works depending on the conditional tag and class you generate for mobiles or add the CSS to your existing file.

    In your case, you may want to add a conditional tag to the function which hooks in your widget.

    What code are you using for the widget before header?


    #49182

    healthydelish
    Participant
    Post count: 1

    Thanks… that helps a little.

    I registered a new widgetized area (before-header) in functions.php then added .before-header to the tablet and phone sections of my stylesheet (it wasn’t displaying on those before I did that). Where I’m stuck is trying to suppress it from the desktop/laptop version of the site. I feel like it should be as simple as adding .before-header {dispay: none} to the desktop section of my stylesheet, but that isn’t working.

    This is the first time I’m working with a responsive site – I might have gotten myself in a little over my head.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.