Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 11, 2017 at 2:01 pm #862875
    spidercreations

    Having an issue with the transparency options for the home page. Under Enfold > Header > Transparency Options I have a special logo uploaded there, but when shown on the home page, the logo is “crunched” in multiple ways. It does not look right in a full screen browser, plus on mobile it seems to crunch even more. The logo “changes” when you get to mobile to not be transparent, and that is OK.

    Second on all other pages, there seems to be a large amount of space between the navigation menu and the multi-colored green line a the start of the main content area.

    Can you provide suggestions? As always, thank you for the support.

    October 12, 2017 at 7:33 pm #863590
    spidercreations

    Bump. Any help or suggestion here?

    October 13, 2017 at 9:08 am #863800
    Ismael

    Hi,

    We are very sorry for the late response. Please remove the following css modifications.

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    /* min-height: 233px !important; */
}

    And then add the following code.

    .av_minimal_header #header_main .container {
    height: 182px;
    line-height: 182px;
}

.av_header_transparency .logo img.alternate, .av_header_transparency .logo {
    min-width: 500px;
    min-height: 182px;
}

    Best regards,
    Ismael

    October 13, 2017 at 2:47 pm #863968
    spidercreations

    Thank you. But the logo for mobile is way too small currently.
    Note the site has now been MOVED to a live server, and I’ve provided you the URL in the Private Content area.

    I did also remove this line from the custom.css…

    #top .header-scrolled .main_menu {
    margin-top: 20px;
}

    So the only custom CSS currently being used is …
    `.av_minimal_header #header_main .container {
    height: 182px;
    line-height: 182px;
    }

    .av_header_transparency .logo img.alternate, .av_header_transparency .logo {
    min-width: 500px;
    min-height: 182px;
    }’
    I poked around a bit looking at the sizing in the Enfold Theme Options area, but no luck.

    Thank you and I look forward you your reply.

    Steve

    October 13, 2017 at 3:05 pm #863971
    spidercreations

    Update. I went back in and added back this code:

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 186px !important;
}

    I did this since the logo in mobile was way too small and that code seems to have fixed that issue.

    But, In a regular browser window, this seems to push the content on the site (starting with the multi-color green bar) down a bit too much. On mobile it looks fine.

    If you have a suggestion, I’d appreciate your input.

    Not sure if I screwed up the code at all and want to ensure it is correct. Here is all of the style.css right now:

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 186px !important;
}

.av_minimal_header #header_main .container {
    height: 182px;
    line-height: 182px;
}

.av_header_transparency .logo img.alternate, .av_header_transparency .logo {
    min-width: 500px;
    min-height: 182px;
}
    October 15, 2017 at 5:19 am #864402
    Ismael

    Hi,

    Please remove the following css code.

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 186px !important;
}

    And then add this one at the very bottom.

    @media only screen and (max-width: 767px) {
    .responsive .logo img {
        max-height: 200px;
    }
}

    Best regards,
    Ismael

    October 15, 2017 at 2:28 pm #864485
    spidercreations

    Thank you. Seems to work.

    October 15, 2017 at 6:39 pm #864522
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header transparency and spacing on other pages’ is closed to new replies.