Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 15, 2019 at 6:13 pm #1101144
    Troom94

    Hello! I have some problems with the glassy header on my Home page.
    I use a sticky header that is shrinking when scrolling down. I also have a phone info bar on top.

    1. I don’t want the phone info bar to be transparent. How can I change the transparency of it (only for the phone info bar, not the whole header)?

    2. The other pages are not set to Glassy Header and seem to overlap the content and I can’t tell why. I only want the Header on the Home page to be Glassy. On the other pages I only want the shrunk header to be glassy/transparent (This works right now, the only problem is the overlap)

    Here is all the CSS I haved used on my website so far:

    .container.av-logo-container {
margin-bottom: 10px;
}

.container.av-logo-container {
margin-top: 10px;
}

#top .main_menu .menu li > a {
padding-top: 0px !important;
}

#top .social-bookmarks > a {
padding-right: 10px !important;
}

#top .social_bookmarks {
top: 0px !important;
}

.phone-info {
font-size: 17px;
}

.avia-caption-title, .avia-caption-content {
    background: rgba(98,154,206,.8) !important;
    padding: 20px;
}
.avia-caption-title{
    display: inline-block !important;
}
.avia-caption-content{
    width: 100%;
}
.avia-caption-content p{
   margin: 0; 
}
.caption_bottom .slideshow_caption{
    bottom: 20px !important;
}

#slideshow_big .slideshow_caption {

width: auto;

}

.slideshow_align_caption {
  text-align:middle !important;
}

.header-bg, .header_bg { opacity: 0.6 !important; background: white !important; }
    May 16, 2019 at 1:33 pm #1101429
    Troom94

    https://drive.google.com/open?id=1J_TYjrYjpC5ElfJafLMopn1BfubfSOC8

    Here is a screenshot of the overlap issue.

    Does it have to do something with the styling of the whitespace over and under the logo? I’m talking about this:

    .container.av-logo-container {
margin-bottom: 10px;
}

.container.av-logo-container {
margin-top: 10px;
}
    May 17, 2019 at 3:47 am #1101606
    Rikard

    Hi,

    Thanks for the screenshot. The margins you are applying might be causing that, please try to remove them to see if that is the case. If you need further help then please post a link to where we can see the actual element.

    Best regards,
    Rikard

    June 3, 2019 at 7:03 am #1106579
    Troom94

    Hey!

    Took me a while to come back to you. You can find my website in the private content.
    The problem still persists and I’m pretty sure that it has something to do with the Quick CSS styling of the margin top and bottom of the logo area.

    But I also have two other issues that I need your help for:

    1. The header area is grey on mobile devices on all pages but the home page. I would like it to be white on all pages.

    2. There is a huge gap after the grid row on mobile devices on the home page. How can I remove that?

    Thank you in advance!

    Thank you for the great theme!

    Yours sincerely,

    Dominik

    June 4, 2019 at 2:51 am #1106886
    Rikard

    Hi Dominik,

    Thanks for the update, please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.home .av_one_half {
  min-height:auto !important;
}

#header, #header_meta {
  background: white !important;
}
}

    Best regards,
    Rikard

    June 4, 2019 at 7:16 am #1106936
    Troom94

    Hey Rikard!

    That worked like a charm for the background issue and the white space after the grid row. Thanks a lot!

    But the Problem with the overlap of the header on all pages but the home page still persists unfortunately. You can see the issue when you visit the page I put in the private content area.

    Thank you in advance!

    Best regards,

    Dominik

    June 4, 2019 at 4:08 pm #1107160
    Nikko

    Hi Dominik,

    Can you try adding this css code as well?

    .html_header_top.html_header_topbar_active.html_header_sticky.html_large #top #main {
    padding-top: 0 !important;
}

    Best regards,
    Nikko

    June 4, 2019 at 6:15 pm #1107199
    Troom94

    Hey Nikko!

    I tried adding that code but unfortunately it doesn’t remove the overlap but pushed everything else up (as if the page was set to “glassy”). If I then adjust the padding to the right height the home page is messed up because it also has the white space and I want the header to be glassy there..

    Thanks in advance

    Best regards,

    Dominik

    June 6, 2019 at 8:57 pm #1108073
    Troom94

    Dear Kriesi Team!

    Do you think you can help me somehow? I would highly appreciate it!

    There is still an overlap when I remove the padding from the top and bottom of the logo.. so I have no idea what is causing this issue.
    Let me know when you need login credentials or anything.

    Thank you in advance!

    Best regards,

    Dominik

    June 7, 2019 at 9:19 am #1108177
    Nikko

    Hi Dominik,

    We apologize for the delayed response.
    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    June 7, 2019 at 11:06 am #1108234
    Troom94

    Hi Niko!

    Thank you for the fast response. I put the link the private content.

    Thank you in advance!

    Best regards,

    Dominik

    June 7, 2019 at 2:03 pm #1108264
    Nikko

    Hi Dominik,

    Thanks for giving us admin access, this code was causing the issue:

    .header-bg, .header_bg { opacity: 0.5 !important; background: white !important; }

    I have commented it out. Let us know if you need further assistance.

    Best regards,
    Nikko

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