Above Header Size changes


#1

Hi,

Need to reduce the width and change the color of the “Above Header” widget.

How may I shrink the width of this widget by 1/2?

Thanks


#2

Hello there,

Thank you for getting in touch. In order to make me able to provide you better assistance, could you please post your URL here?

Warmest regards,
Kharis


#3

pblcompany.com


#4

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Download and activate the Simple Custom CSS plugin
  2. Go to Appearance > Custom CSS. Then paste the following CSS code on the provided box
@media only screen and (min-width: 992px){
.widget-title span{
  display: block;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
}
  1. Update Custom CSS

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#5

Maybe I was not clear in what I wished to accomplish. When I applied your CSS code (and tried some variations of the %s, I noticed that the second page was pushed together (tried 1% and the lettering was 1 letter per column). What I wanted to do was to make the “above header” only about three rows or lines thick, with just my simple “scroll down statement” in the middle of the white notice. So, you may say I wanted to reduce the height of the above header to only 3 lines?

Sorry for the confusion.

Thanks


#6

Hello there,

What I wanted to do was to make the “above header” only about three rows or lines thick...

Could you please try the following?

@media only screen and (min-width: 992px){
  .services-area .widget-title span{
    display: block;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}
Need to reduce the width and change the color of the “Above Header” widget.

To change its color, add color: #ff0000;. You should need to adjust the color code as needed.

So, your code should be like the following.

@media only screen and (min-width: 992px){
  .services-area .widget-title span{
    display: block;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    color: #ff0000;
  }
}

I hope this reply helps.

If it didn’t help, could you please post a screenshot of “above header” you meant. We might miss on this part.

Regards,
Kharis


#7

Didn’t make any changes to my above header block. The screen shot is here.

http://postimg.org/image/u7vymzvg5/

I want to reduce the size of the block (“Above Header”) that contains the words: “Welcome to the PBL site-scroll down for additional information”

Thanks


#8

Hello there,

Thank you for the screenshot. It helped me a lot.

Could you please try the following code?

#masthead{
  max-height: 450px;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#9

The new CSS code changed the Header file to my preferred height, but it is the Above Header white space that I wish to reduce.

See: http://postimg.org/image/9t5udazap/

Thanks again for your excellent support.

Mike


#10

Hello there,

Could you please try the following?

.ah-widget-area .widget {
    padding: 10px 0px;
}

Let me know how it works for you.

Warmest regards,
Kharis


#11

No change.


#12

Hello there,

Thank you for reporting.

Could you please try the following?

.ah-widget-area .widget {
    padding: 10px 0px !important;
}
  • Try clear all your browser cache before visiting your site
  • Try to clear all caches if you have cache plugin enabled

Let me know how it goes.

Warmest regards,
Kharis


#13

It worked!

I added the color line: color: #ff0000 and it gives me a red font.

Thanks for your help.


#14

Hello there,

Nice!

I’m glad to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis


#15

Just another question: how may I change the color of the ah-widget-area? The color code that I added only changed the color of the font.

Thanks again.


#16

Hello there,

Could you please try to use the following CSS code?

.ah-widget-area{
  background: #000 !important;
}

You should need to adjust the hex color value as needed.

Regards,
Kharis


#17

That worked!

Thanks again for your excellent support…