[Resolved] Elementor Transparent and Sticky Navigation

Home Forums Support Elementor Transparent and Sticky Navigation

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #321852
    Ben

    Hello!

    I recently installed GeneratePress premium and Elementor pro on my staging server. I’ve merged my header with my navigation but am having two issues.

    1. My current website is getkohort.com (Jupiter theme/Visual Composer). My staging site with GeneratePress is staging2.getkohort.com (user: kohort, password: stage17*). I’m in the process of moving everything over and I’m trying to get my navigation to be the same as my current website. I’m lost and can’t figure out what I need to do to adjust the size of the background/buttons of the navigation. Whenever I add underline links or my CTA button they are way below or huge. I also can’t figure out how to make my sticky navigation to not be transparent.

    2. When I’m in Elementor and try to edit the first section, the navigation menu is so far down that it keeps me from being able to use the Elementor tabs at the top – meaning I can’t delete or edit that top section. I think this might be solved if it’s caused by the above.

    I know some CSS/HTML so I’m not afraid to make some additions/edits – but I’m not a pro and I don’t want to bug my developer if I don’t have to (he’s working on our app) and I’d rather learn myself. I appreciate any help! Thanks!

    GeneratePress 1.3.46
    GP Premium 1.3
    #321904
    Tom
    Lead Developer
    Lead Developer

    Hi Ben,

    1. Your menu items are really tall. You can adjust this in Customize > Layout > Primary Navigation.

    You can also give your navigation a background color in Customize > Colors > Primary Navigation. Then to make it transparent when necessary, do this: https://docs.generatepress.com/article/merging-header-navigation-content/

    2. I’ve heard from users that they sometimes need to “un-merge” the header and content in order to edit the top sections in Elementor. This is something I’m trying to find a solution for.

    #321916
    Ben

    Thanks, Tom!

    1. Ok cool. So I had it set to 90px because that was the position I wanted it on the page and the size of the logo (I had pulled that 90 from the css of my previous site). I set it to 20px and that looks about right when I compare the CTA buttons, but now it’s all the way at the top of the page and my SVG logo has disappeared – I currently have

    .site-logo img {
    width: 200px;
    }

    in my style.css file. Do I need to add or change something else to push that down?

    2. That works. Thank you!

    #321991
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .main-navigation .navigation-logo img {
        width: 200px;
        height: auto;
    }
    #322335
    Ben

    Thank you! That brought back my logo. Is there a way to move the logo and the navigation down a bit on the page? Right now it’s at the very top of that page. The only way I’ve been able to move it down is with the line-height or padding, but both of those make the buttons huge again. I really appreciate your help!

    #322360
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (min-width: 769px) {
        #site-navigation {
            margin-top: 10px;
        }
    }
    #329130
    Ben

    Thank you, Tom. I was able to get my main navigation sorted out. However, the sticky navigation’s background is not going full width. Here are a couple of screenshots:

    Transparent (looks good): https://www.dropbox.com/s/aw0z1t5snqcbl80/transparent_menu.jpeg?dl=0

    Sticky (I’d like the blue to extend full width but the menu to sit where it is): https://www.dropbox.com/s/v851w3ux0cjatle/sticky_menu.jpeg?dl=0

    Thanks!

    #329155
    Tom
    Lead Developer
    Lead Developer

    Is the page header container type set to Full width?

    What about the navigation width (Customize > Layout > Primary Navigation)?

    #329345
    Ben

    The page header container was set to full width.

    The navigation width in primary was set to contain. I changed that to full-width which gives me a full-width sticky background – but my navigation items are on the edges of the screen. Can I move them back to where they were without losing the full-width bg?

    https://www.dropbox.com/s/d89utbuxruvf0zx/navwidth_full.jpeg?dl=0

    #329396
    Tom
    Lead Developer
    Lead Developer

    Is the inner navigation width set to contained?

    #329403
    Ben

    Facepalm. Thank you! That was exactly what I was looking for.

    #329405
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.