-
AuthorPosts
-
September 11, 2019 at 10:58 am #1136982
When I use the special header, it doesn’t leave a large padding by default top and bottom and the H2, H3 text isn’t centered. It’s pulled more to the top. Any custom CSS for this? I tried all the ones I could find here in the forum but none seems to do anything. Also would like to set the background color and text color.
Thanks,
FrankSeptember 12, 2019 at 10:05 am #1137443Hey Frank,
There are different styling options for the special headers so I’m not sure I understand what you are referring to. Could you post a link to where we can see the elements in question and explain a bit further what you would like to achieve please?
Best regards,
RikardSeptember 12, 2019 at 2:22 pm #1137530Hi 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,
FrankSeptember 13, 2019 at 10:09 am #1137883Hi Frank,
Thanks for that. You could give the element a class like header-extra-padding, then add this to Quick CSS:
.header-extra-padding { padding:20px; }
If you can’t see the custom CSS field then please select to activate it under Enfold->Layout Builder.
Best regards,
RikardSeptember 13, 2019 at 6:51 pm #1138130Thanks Rikard,
I added that to the Quick CSS but it didn’t change anything.
Frank
September 13, 2019 at 7:10 pm #1138145Hi,
Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over
Best regards,
Jordan ShannonSeptember 13, 2019 at 7:39 pm #1138154Hi,
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,
FrankSeptember 15, 2019 at 6:51 am #1138467Hi Frank,
The class I gave you to use is not on the page, did you add a class to the element? If so then what did you name it?
Best regards,
RikardSeptember 15, 2019 at 3:09 pm #1138513Hi 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;
}
}September 16, 2019 at 10:10 am #1138742Hi,
Thanks for the update, if you read my reply again, then you will see that you need to add a class to the element first. Otherwise the CSS won’t do anything. Please add the class name to it, then add the CSS to the Quick CSS box.
Best regards,
RikardSeptember 16, 2019 at 10:41 am #1138756Thanks Rikard. I’m not sure though what you mean by add a class to it first. Add a class to what and where? Thanks.
September 17, 2019 at 12:46 pm #1139084Hi,
Can you please read what I wrote in the reply I linked to? You add the class to the element in the element options. If you don’t see that field then activate it under Enfold->Layout Builder.
Best regards,
RikardSeptember 17, 2019 at 6:33 pm #1139207Thanks 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,
FrankSeptember 19, 2019 at 1:40 am #1139761Hi,
Thank you for the login, perhaps some screenshots will help, I see that your custom classes for the elements are not enabled so to do so I went to Enfold Theme Options > Layout Builder > Builder Options For Developers > Custom CSS classes input field
Now when you open any element you will see a new option for Developer > Custom CSS Class, this is where I added the custom class Rikard posted:
Now this css is working for special heading “Rooms”, but your special headings such as “Lincoln’s Suite” has the extra padding on the bottom because someone added some custom css in a code block on the page:<style type = "text/css"> .av-special-heading-tag { background: #a10000 !important; padding-top: 10px; padding-bottom: 10px; } </style>
so I would recommend creating another custom class for those elements and adding it to your Quick CSS so you can remove the code block css.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.