Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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,
    Frank

    #1137443

    Hey 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,
    Rikard

    #1137530

    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

    #1137883

    Hi 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,
    Rikard

    #1138130

    Thanks Rikard,

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

    Frank

    #1138145

    Hi,

    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 Shannon

    #1138154

    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

    #1138467

    Hi 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,
    Rikard

    #1138513

    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;
    }
    }

    #1138742

    Hi,

    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,
    Rikard

    #1138756

    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.

    #1139084

    Hi,

    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,
    Rikard

    #1139207

    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

    #1139761

    Hi,
    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
    2019-09-18-192049
    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:
    2019-09-18-192250
    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>

    2019-09-18-193059
    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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.