Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 11, 2015 at 12:26 pm #550976
    Rosenqvist10

    Hey,

    Is it possible to have the logo section stay at the top and have just the navigation menu as sticky? Alternatively, is it possible to change the menu style after-scroll so that I could put the logo in the title menu?

    I have placed a large logo image above the menu which will not work if shrunk, so I need it to disappear after the user has scrolled but would still like to keep the menu sticky.

    All help appreciated!

    Regards,
    Chris

    December 11, 2015 at 1:10 pm #551004
    Yigit

    Hey Rosenqvist10!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    .header-scrolled .logo { opacity: 0 !important; }

    It should make logo invisible when you scroll down. If that does not help, please post the link to your website.

    For the alternative, can you please post a screenshot and show the changes you would like to make so we can make sure that we are on the same page.

    Cheers!
    Yigit

    December 11, 2015 at 2:23 pm #551068
    Rosenqvist10

    Hi Yigit,

    The CSS didn’t work. I tried {display: none !important;} just in case but still nothing, so I don’t think the CSS is actually calling the element. Is there another way to define/call when page has scrolled?

    With the alternative I meant.. If I could have the logo as a separate element above the header which stays there, and instead use the header option with the logo within the menu bar. The problem in that case would be having two logos at the top, so if I could make the logo within the menu bar disappear when the screen is at the top and then appear once the user has scrolled.

    I’m building offline, but I will attach pics of what I am more or less out after. Thanks for your help!


    IMAGE 1: http://imgur.com/SryoGWC
    IMAGE 2: http://imgur.com/JMyyBqn

    Regards,

    Chris

    December 11, 2015 at 2:27 pm #551073
    Yigit

    Hey!

    Are you using one of the “logo above menu below” options? And do you have shrinking header enabled in Enfold theme options > Header > Header Behaviour?
    If your answer is yes to both questions, please try using following code instead

    .header-scrolled #header_main > .container {
    display: none;
}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Cheers!
    Yigit

    December 11, 2015 at 2:46 pm #551093
    Rosenqvist10

    Hey it works great!

    The problem now is that my logo isn’t centered so it hugs the left hand side as it shrinks which looks wrong. Is it possible to do this without the shrink or alternatively to center the logo? I tried adding in margin: auto but it didn’t work.

    Thanks for the help!

    Chris

    December 11, 2015 at 2:55 pm #551097
    Yigit

    Hi!

    Please choose “Logo center, menu below” option. If that does not help, please post a screenshot of the issue

    Cheers!
    Yigit

    December 11, 2015 at 3:15 pm #551112
    Rosenqvist10

    Works great! Thank you!

    /Chris

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Sticky menu’ is closed to new replies.