Adding a Responsive Widget in the Header (next to website name)

HI Deb. The header widgets container is hidden by default when the viewport reaches 1200px to allow more room for the site title/byline/logo. You can add this custom CSS to display it in all viewports:

/* always display header widgets */
#header-widgets {
    display: block !important;
}

You may need some additional CSS to position the widget based on whatever else you have in the header.

Hi BdBrown,

I added the code and cleared my cache … I am seeing the ads. But just like the search box issue you helped me with, here also the name of the site does not centre as the screen size gets smaller. (It stays at left corner only).

For the similar issue in the search box related query you provided the following code

/* changes for iPad viewport */
@media only screen and (max-width: 960px){
    /* remove top padding */
    #header .pad {
        padding-top: 0;
    }
    /* adjust and center title */
    .site-title {
        padding: 30px 0;
        width: 100%;
        float: none;
        line-height: 50px;
    }
    .site-title a {
	text-align: center;
    }
    /* hide description */
    .site-description {
	display: none;
    }
    /* center search widget container */
    #header-widgets {
	float: none;
	margin: 0 auto;
    }
}

Can you tell me the codes that I can use in the current question so that the name of the website centres above the header widget ad as the screen gets smaller.

Which site are you trying to modify? Is the header widget active?

Yes, the header widget is active and its a different site (different from the one you helped in adding a search box).

In this site I am using the header widget to serve responsive ads. The header widget ads always come properly in laptops, desktops and mobiles. But in tablets the ads just disappear. After your 1st reply code in this thread the ads started appearing in the tablet screen size.

But the name of the website was at the left corner and did not centre (in a responsive manner ) above the header widget ad as the screen gets smaller.

I hope I cleared the confusion.
Here is the link

Can you post a link to the site?

Here is the link

This? https://revealit.me/14689823de

Hi there BdBrown … sorry for the confusion … here the site I was asking the question for with the header issue.In this site I am using the header widget to serve responsive ads. The header widget ads always come properly in laptops, desktops and mobiles. But in tablets the ads just disappear. After your 1st reply code in this thread the ads started appearing in the tablet screen size.

The header CSS codes that I am currently using are

/* always display header widgets */
#header-widgets {
    display: block !important;
}
#header-widgets {
    max-width: 728px;
    width: 100%;
}@media only screen and (max-width: 728px) {
  #header-widgets {
    display: block !important;
  }
}

But the name of the website stays at the left corner and does not centre (in a responsive manner ) above the header widget ad as the screen gets smaller. Any changes that can make it work is welcome.

The same code you used on the search box should work here with one small modification. Try removing this code:

#header-widgets {
    max-width: 728px;
    width: 100%;
}@media only screen and (max-width: 728px) {
  #header-widgets {
    display: block !important;
  }
}

And add this:

/* changes for iPad viewport */
@media only screen and (max-width: 960px){
    /* remove top padding */
    #header .pad {
        padding-top: 0;
    }
    /* adjust and center title */
    .site-title {
        padding: 30px 0;
        width: 100%;
        float: none;
        line-height: 50px;
    }
    .site-title a {
        text-align: center;
    }
    /* hide description */
    .site-description {
	display: none;
    }
    /* center ads widget container */
    #header-widgets {
        max-width: 728px;
        width: 100%;
	float: none;
	margin: 0 auto;
    }
}

Thank you BD Brown , that solves the issue. You are a legend providing such quick solutions.

Before closing this thread just a small question.

See the screen shots below. I keep getting yellow spaces behind the ads. Is that a theme issue and if yes can it be modified ?

Screen Shot 1

Screen Shot 2

I believe that’s the ad iframe background which is normally covered when the ad is displayed. I checked several single posts on your site and the ads above and below the post content filled out the container so no yellow background is being displayed. I didn’t see anything like the screenshots that you posted above. Do you have an example on the site that shows this?

This particular issue comes up infrequently. There is as such “NO” particular page where this happens. But in no particular order this issue appears. only the header widget ad does not have this issue. But the before and after post ads some times show the yellow back ground when the ads does not fill up the space.

So I was confused if this was a theme modification ? None the less any suggestion that I can use.

Thank you again for so quickly resolving the issues I asked today. All your suggestions have made my sites so much better.

Hi,

Sorry to interrupt.

Are you talking about the background color in your ad within content?
For example, on this url https://www.dentalorg.com/tips-to-solve-multiple-choice-questions.html

Please see my screen-cast. https://screencast-o-matic.com/watch/cDjIedisSz

You should be able to remove it using the following custom css
But I do not know if it will affect other element’s design.

.entry ins {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

Thank you

Hi Denzel ,

Thank you for the reply and screen cast. I saw the screen cast.

I have a doubt. Does that change and Custom CSS – leads towards editing the google codes. I am little confused about that. (as as per google policies it’s a strict no to modify the codes)

This custom CSS suggested … does it change the Google Codes or It just affects the theme style. Just want a clarification on this as I am a little confused regarding this.

@bdbrown & Denzel

Hi the last code is working.

But if you check you will notice that the header ad widget is now constantly appearing below the name of site irrespective of size of device. I checked clearing the cache too.

In large screen devices (like laptop or desktop) also Header Widget ad is below the Site name. Not that its a problem, but ideally it should be to the right of the site name in larger screens and below the site name as screen gets smaller.

Here are the CSS codes that we are using as per your suggestions.

/* remove post date on home page */
.home .post-date {
    display: none;
}
/* remove author and date on single post */
.single .post-byline {
    display: none;
}
.single .post-title {
font-size: 15;
font-weight: 900;
color: #c84023;
}
.single .post .entry {
    color: #000;
}
/* always display header widgets */
#header-widgets {
    display: block !important;
}
/* changes for iPad viewport */
@media only screen and (max-width: 1200px){
    /* remove top padding */
    #header .pad {
        padding-top: 0;
    }
    /* adjust and center title */
    .site-title {
        padding: 30px 0;
        width: 100%;
        float: none;
        line-height: 50px;
    }
    .site-title a {
        text-align: center;
    }
    /* hide description */
    .site-description {
	display: none;
    }
    /* center ads widget container */
    #header-widgets {
        max-width: 728px;
        width: 100%;
	float: none;
	margin: 0 auto;
    }
}
.entry ins {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
}

Not that its a problem, but ideally it should be to the right of the site name in larger screens and below the site name as screen gets smaller. I don’t know what changes is doing this.
N.B : I noticed in some cases – the header widget ad is not appearing too

You expert suggestions are welcome.