#78311 Menu variations

Landing Forums JupiterX WordPress Theme Menu variations

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • Rob Clift

    Hi,

     

    I want to have different menu styles on homepage and interior pages.

    When changing menu styles in customiser i cant see an option for this, is it possible?

    I mainly just want a transparent overlayed menu on homepage and solid colour on other pages, with different colour text between the 2

     

     

    Thanks,

     

    Nodari Support Team

    hello Rob

    Sorry for the delay
    its easy to create a such designed, here is how you can achieve it
    Global setting – use customizer setting to set up your site globally, like you want it to have on all your inner pages
    Homepage – Create new header template with the transparent style and assign it to form the page editor, there is an option to choose a different template for your header under page editor,

    Hope this helps, if you still have any trouble come back with the access details and I will create an example of this setup

    Private
    Rob Clift
    This reply has been marked as private.
    Nodari Support Team

    hello Rob

    Please check again your site 🙂

    This is the changes I made:

    1. I created this new header template for you: http://clockwise.uk/openenergi/wp-admin/post.php?post=11279&action=elementor# Please note, this is the only example, the styling of this header is on you 🙂
    2. this is the setting for your homepage: https://prnt.sc/u7v3xy

    P.s. I did not make any changes to customizer

    Rob Clift

    Hi,

     

    Thanks for doing that, got it working correctly, however is there a way to set a background for only when its the sticky menu?

    The top menu works fine, just when scroll down, its unreadable,

     

     

    Thanks,

    Rob Clift

    Also, how can get the arrows in next to text to show submenus as on current menu styling?

    Amir Rather Support Team

    Hi There

    Try the below CSS (add to Jupiter X > Customize > Additional CSS) for the Sticky Header color and showing arrows as well:

    .jupiterx-header-sticked .jupiterx-site:not(.jupiterx-site-body-border) .jupiterx-header {
        background: #3b3d43;
    }
    @media (min-width: 768px){
    .raven-nav-menu-horizontal .raven-nav-menu a.raven-link-item:not([class*=elementor]) .sub-arrow {
        display: block !important;
        padding-left: 5px;
    }}
    

    PS: use any color.

    Rob Clift

    Hi,

    That has worked thank you,

    Still getting issues though, we have an overall sticky menu thats used throughout the website, is it possible to make this work on the homepage, whilst using the overlayed header menu?

    Just want to site to be consistent throughout

    Rob Clift

    Also with the menu you provided, I’ve amended breakpoints for tablet but the menu still runs over 2 lines at some points which shouldnt at the pixels i set and also then defaults back to dark logo

    Rob Clift

    Hi,

    Any news on this? Got our client chasing us currently

     

    Thanks,

    Amir Rather Support Team

    Hi There

    Really sorry for the delay,

    Globally on the site, the Inbuilt Headers are used for Main and Sticky Header but on the Home page a Custom Header is used,
    It is not possible to mix the two, if the Main Header on Home Page is Custom Elementor Header the Sticky should be a Custom header as well, so the solution is to create a sticky header similar to the other pages with Elementor and assign it to the Home page here https://prnt.sc/udqz8r see:

    Regarding the breakpoints issue, could you please mention the width and if possible provide screenshots?

    Regards

    Rob Clift

    Hi,

    Ok, so i need to recreate the header and sticky in elementor and apply across all pages?

    For breakpoints, we are getting (attached) 2 different issues on global header and elementor

     

    Thanks,

    Rob Clift

    Think I’ve got header styling setup, its now just the responsiveness, need it to drop to burger menu before it drops over 2 lines with the logo

    Amir Rather Support Team

    Hi There

    The only resolutions that should be checked are Desktop, Tablet, and Mobile ideally,

    Could you please mention the resolution/screen width where you see the issues on?

    Waiting for your reply 🙂

    Rob Clift

    Hi,

    Its between 1030px wide and 1180px wide, the menu drops below the logo, I just want the menu to go to a burger before that point so doesn’t happen

    Amir Rather Support Team

    At the moment, the Raven Navigation menu does not follow the Elementor’s breakpoint width. So. even if you have to change the Elementor Breakpoint values in Elementor Settings, it will work for all other places except for the Raven Navigation menu. The Raven Navigation Menu Breakpoints are 1024px (for tablet) and 768px (for mobile) only.
    An alternative way to adjust the mobile menu breakpoint width manually is to use the bundled plugin Jet Menu instead of Raven Navigation Menu.

    But if you take my advice you don’t need to change them, because there are no real devices with widths of 1030px and 1180px, so actually these resolutions don’t matter.

    Best Regards

     

Viewing 16 posts - 1 through 16 (of 16 total)
You must be logged in to reply to this topic. Login