• Resolved timdevogel

    (@timdevogel)


    I’ve just added a widget area in my header and with some help it’s just where I want it. But, the newsletterwidget I’ve placed there is nog responsive, so I’d like to either hide it on the mobile version or, even better, move it to the bottom, just likt the sidebars.

    Here’s the url: http://www.elektroretailmagazine.nl

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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?

    Thread Starter timdevogel

    (@timdevogel)

    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?

    Thread Starter timdevogel

    (@timdevogel)

    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.

    Thread Starter timdevogel

    (@timdevogel)

    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;
      }
    Thread Starter timdevogel

    (@timdevogel)

    Great bdbrown, works like a charm.

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Hiding or moving widget on mobile version’ is closed to new replies.