Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1101144

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

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

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.