Hiding or moving widget on mobile version

You can set:
.widget_newsletterwidget {display: none;}
using CSS @media Query

@timdevogel – try this and see how it works:

Move your cookie-notice div to header.php, just below the header element:

<div id="wrapper">

   <header id="header">

     <div id="cookie-notice"...

      <?php if ( has_nav_menu('topbar') ): ?>

Remove the inline styles and use this css:

#cookie-notice {
  display: block;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background-color: #000;
  }

Oops, sorry. Never mind. I was thinking this was an issue with your topbar covering up your logo (which is does in responsive mode). When you say it’s “not responsive”, in what way?

What I mean, bdbrown, is that it kind of messes up the header in the mobile version, so I’d like it to disappear or move to the bottom, like the sidebars.

And we’re talking about the email signup widget on the right side of the header?

Yep, that’s the culprit.

tim – can you elaborate on what it’s doing that’s causing a problem? Is it that it doesn’t center under the logo when the menu collapses? Hiding or moving it is doable but wondering if there is something else we can address that will allow you to keep it in the header.

Hi bdbrown. Well, it positions itself under the logo, making the header very tall.
I don’t know if you have a smartphone, but if you use that to look at the site you’ll see what I mean immediately.

If you want to push it to the footer you could do something like this:

/* move widget to footer on mobile screen */
@media only screen and (max-width: 719px) {
#newsletterwidget-2 {
  position: fixed;
  bottom: 40px;
  right: 5px;
  }

/* move widget to header on normal screen */
@media only screen and (min-width: 720px) {
#newsletterwidget-2 {
  position: initial;
  }

If you just want to hide it you could do this:

/* hide widget on mobile screen */
@media only screen and (max-width: 719px) {
#newsletterwidget-2 {
  display: none;
  }

/* show widget on normal screen */
@media only screen and (min-width: 720px) {
#newsletterwidget-2 {
  display: block;
  }

Great bdbrown, works like a charm.

Thanks!