Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 19, 2016 at 9:55 pm #662718
    lanelee

    I am trying to create a top menu bar that is completely fixed. One bar with the logo, top menu, social icons and mobile menu icon.

    I have them all on the same line with CSS but, the logo and menu icon are ‘fading out’ when I scroll down? Is there a way to stop the fade out?

    Also I just noticed the links for the Mobile Menu and logo are linking below the actual images? Any ideas.

    home

    Thanks,
    Lane

    July 22, 2016 at 11:08 am #663782
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .header_bg{
opacity: 1 !important;
}

    Cheers! 
    Josue

    July 22, 2016 at 8:45 pm #664072
    lanelee

    Thanks Josue but, that did not seem to work.
    When I scroll down the logo and the mobile menu fade out? I’m thinking maybe the sub menu background is fading in overtop of them.. Maybe it just can’t be done..

    July 23, 2016 at 9:07 pm #664247
    Josue

    Hey!

    Try with this instead:

    #top #header_meta {
    background: transparent;
}

#header_main {
    background: black;
}

.av_header_transparency #header_main {
    background: transparent;
}

    Cheers! 
    Josue

    July 25, 2016 at 1:47 pm #664610
    lanelee

    Josue,
    That worked it looks great!! But, I am still having troubling getting everything to link? My logo and mobile menu are not clickable I think maybe they are under another layer or something. Any ideas? I know this is a customization beyond the normal install. I’m really stuck and would be willing to pay extra for this help.

    Thanks so much!
    * I did just purchase 3 more licenses for Enfold it is the BEST theme I have ever used!

    July 25, 2016 at 7:07 pm #664771
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #header_meta {
    width: 40%;
    transform: translateX(85%);
}

#avia2-menu{
    width: auto !important;
}

    Cheers! 
    Josue

    July 26, 2016 at 2:15 pm #665337
    lanelee

    Josue,
    Thanks so much I can see what you are trying to do but, it’s not working just right. I put a blue background on the #header_meta and you can see the problem. Specifically when I adjust the screen size things run together and overlap. I really need that menu to be centered as well. Any ideas?
    Thanks,
    Lane

    July 28, 2016 at 6:31 am #666058
    Vinay

    Hi,

    You have the below code in custom.css i think

    @media only screen and (min-width: 768px) {
#header_meta {
    position: fixed;
    top: 0;
    /* width: 40% !important; */
    transform: translateX(50%);
    height: 35px !important;
    border-bottom: none !important;
    background-color: #055CC2 !important;
    padding: 0px !important;
}}

    Change that to 

    @media only screen and (min-width: 768px) {
#header_meta {
    position: fixed;
    top: 0;
    /* width: 40% !important; */
    transform: translateX(50%);
    height: 35px !important;
    border-bottom: none !important;
    background-color: #055CC2 !important;
    padding: 0px !important;
}}

    basically remove the width 40% so it will automatically take the width of the content and transform it by 50%.

    Best regards,
    Vinay

    July 28, 2016 at 2:03 pm #666237
    lanelee

    Vinay,
    Thanks for the help! It’s almost working so close.. I just can’t seem to get the links to center. I need it centered with the content below. If you look on a wide screen it is positioned next to the logo not in the center. I’ve tried margin – text align ?? Any idea? Thanks so much!

    August 2, 2016 at 2:42 am #667512
    Ismael

    Hi,

    Please adjust the code:

    #header_meta {
    position: fixed;
    top: 0;
    transform: translateX(-50%);
    height: 35px !important;
    border-bottom: none !important;
    background-color: #2ED64A !important;
    padding: 0px !important;
    margin-left: 5% !important;
    text-align: center !important;
    float: none !important;
    left: 50%;
}

    We set the translateX property to -50% then added the “left” property.

    Best regards,
    Ismael

    August 10, 2016 at 3:45 pm #670877
    lanelee

    That did seem to fix it. Thanks so much for all the help!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Fixed Top Menu Bar’ is closed to new replies.