Special Header Padding, Background Color, Text color and Centering Text

Hi Rikard,

Thanks. Link posted below. I can’t seem to get the top and bottom padding larger in the Special Heading that says “Rooms” and the colors I set in advanced styling for H2 and in the General settings don’t look like the same colors on the page. Then below in the smaller boxes where in says “Lincoln’s Suite” the Special Heading is pushed up showing a different color behind it.

Thanks again for checking,
Frank

Thanks Rikard,

I added that to the Quick CSS but it didn’t change anything.

Frank

Hi,

Ok I moved it to the top and cleared cache. Still no change. See where the word “Rooms” with the red background and text in gold. Tried it on my phone also which doesn’t store cache.

Thanks,
Frank

Hi Rikard,

I’m not sure what you mean about what I named it. I just copied and pasted what you said at the very top in the Quick CSS field like this:

Quick CSS Box:

.header-extra-padding {
padding:20px;
}
.logo { top: 93px; }
#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#header_meta {
background-color:black !important;
}
.phone-info span {
color:white !important;
font-size: 11px;
}
#scroll-top-link {
background-color: #e80000;
color: white;
border-color: white;
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a,
.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
height: 120px;
line-height: 120px;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a,
.responsive #top #wrap_all .av-logo-container {
height: 120px !important;
line-height: 120px;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
top: -35px;
left: auto;
right: 0vw;

}
}
@media only screen and (max-width: 770px) {
#header {height: 85px !important; }
.responsive #top #header .logo,.responsive #top #header .logo a,.responsive #top #header .logo img {max-width: 170px !important; }

}
@media only screen and (max-width: 480px) {
.logo {
position: relative!important;
top: 35px!important;
}
#header_main .inner-container {
height: 180px;
}}
@media only screen and (max-width: 767px) {
.responsive #main avia-layerslider {
display:none;
}}
@media screen and (max-width: 468px) {
.avia-slideshow-inner {
min-height: 100px;
}
.avia-slideshow li img {
min-height: 200px;
width: 400px;
min-width: 400px;
}
}
@media only screen and (max-width: 989) {
/* Add your Mobile Styles here */
.responsive #top .logo {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 0;
}

.responsive #top #header_main {
z-index: 3;
min-height: 80px;
position: relative;
}

.responsive #top .logo img {
margin: 0;
margin: 0 auto;
max-height: 80px !important;
}
}

Thanks Rikard. I’m not sure though what you mean by add a class to it first. Add a class to what and where? Thanks.

Thanks Rikard, I apologize for not understanding. I know what you’re saying, but where do I find the element options? Do I click on the special header and find it in there to name it, or where?

Thanks,
Frank