hide header widgets on different devices

  • Resolved rubior

    (@rubior)


    11 years, 4 months ago

    Hi I would like to show/hide my header widgets. http://www.yourcouncil2.eclektik.co.uk – the logos to the right sit perfect on desktop view but not on mobile/tablet so would like to hide these accordingly (at the moment I’m using the dynamic widget plugin but know this can be done better with css/media query. Same way, I would like to add a search widget just under logo in mobile view only. Would be grateful for the help.

    thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)
  • bdbrown

    (@bdbrown)

    11 years, 4 months ago

    Hi rubior. The current version of the theme (v1.5.1) supports a “Header Ads” sidebar that should be able to contain the same widgets you are currently using. The Header Ads sidebar is automatically hidden when the viewport reaches 1200px. As far as a search widget in mobile view, you might take a look at this thread for some references.

    Thread Starter rubior

    (@rubior)

    11 years, 3 months ago

    Hi Bdbrown, I’ve just got round to trying these out. Have the search bar in the header now but its still showing on desktop view. I only want the header-search toggle to display in mobile view. Half way there.. any ideas?

    Thanks

    bdbrown

    (@bdbrown)

    11 years, 3 months ago

    Are we talking about the search icon in the main navigation menu bar?

    Thread Starter rubior

    (@rubior)

    11 years, 3 months ago

    Hiya, yes. Ideally want the search bar to be visible (expanded) in desktop view so added the search widget to the sidebar… So only now require the search icon to display in mobile view.

    bdbrown

    (@bdbrown)

    11 years, 3 months ago

    This should display the search icon at the same point that the sidebar collapses:

    #nav-header .toggle-search {
  display: none;
}

@media screen and (max-width: 960px) {
  #nav-header .toggle-search {
    display: block;
  }
}
    Thread Starter rubior

    (@rubior)

    11 years, 3 months ago

    Perfect. Thank you so much Bdbrown 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘hide header widgets on different devices’ is closed to new replies.