#76794 Menu issues

Landing Forums JupiterX WordPress Theme Menu issues

Viewing 34 posts - 1 through 34 (of 34 total)
  • Author
    Posts
  • Desiree de Vries

    Hi,

    I had a very long ticket and had to send a new one (Tatyana is helping me great, but as soon as someone else help, I have to wait for days!). I do miss the chat!!

    Any way, the issues we’re having:

    See below in credentials the page:

    1. we would like the submenu on hoover and active to become bold (see screenshot 1)
    2. we would like to be the gap in the main menu to be 40 px everywhere (see screenshot 1)
    3. the collapse menu is not looking well. In the backend it is, but in the front end all the text goes behind each other. (screenshot 3 and 4)
    4. we want the collapse menu to become 80% transparant and on hoover and active the full 100% colour. How can we do that? I used header elements now, because Tatyana recommended not to use the megamenu again. But the items need to be hooverable.  (screenshot 5)

      Thanks!

    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Desiree,

     

    1 – To do this, I added the below CSS to Jupiter X -> Customizer -> Custom CSS

     

    .current-menu-item.current_page_item,
    .menu-item:hover{
    font-weight: bold;
    }

     

    2 – To do this, I added the below CSS to Jupiter X -> Customizer -> Custom CSS

     

    #jet-menu-item-844{
    margin-right: 20px;
    }

     

    3 – I checked this and its neither looking good in the frontend nor in the backend. It’s looking the same behind each other in the Elementor header template as well as the frontend.

    Where exactly do you see it fine?

    Can you please share the code that you think may have created the issue with the collapse menu?

     

    4 – Do you want the background color of the collapse menu box to be transparent or the menu item text color?

     

    5 – I see that you are using a background image which is a bit tricky to make responsive for all the devices. The best thing would be to set a different background image for different screen sizes. Elementor allows us to add the background image for 3 device sizes which are desktop, tab and a mobile.

     

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Desiree,

     

    1/2 – To do that you first have to add the Avenir heavy font to the site and then use the CSS which I can share later with you. Is the “Avenir heavy” font already available on the site?

     

    3 – I removed all the CSS temporarily but that did not fix the menu. So, I added the below CSS to fix this issue.

     

    .jet-sub-mega-menu .elementor-widget-wrap>.elementor-element{
    width: 100% !important;
    }

     

    4 – To make the text 80% transparent and opaque on hover, I added the below CSS:

     

    .elementor-heading-title,
    .elementor-heading-title a{
    opacity: 80%;
    }
    
    .elementor-heading-title:hover,
    .elementor-heading-title a:hover{
    opacity: 100%;
    }

     

    5 – In that case, you can set the Background Size option of the image to Cover and it will show full size on the laptop as well as bigger screens.

     

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Desiree de Vries

    Hi, can you please help me? Thanks!

    Private
    Desiree de Vries
    This reply has been marked as private.
    Danish Iqbal Support Team

    Hello Desiree,

     

    Sorry for the late reply.

     

    1 – To add the “Avenir Heavy” font family instead of bold font weight, I replaced the earlier CSS with this CSS:

    .current-menu-item.current_page_item > a,
    .menu-item:hover > a{
    font-family: 'Avenir Heavy' !important;
    }

     

    4 – To fix this, I replaced the earlier CSS with this:

    .jet-sub-mega-menu .elementor-heading-title,
    .jet-sub-mega-menu .elementor-heading-title a{
    opacity: 80%;
    }
    
    .jet-sub-mega-menu .elementor-heading-title:hover,
    .jet-sub-mega-menu .elementor-heading-title a:hover{
    opacity: 100%;
    }

    5 – Oh sorry, instead of cover, please set it to “contain” which will show the whole image on any screen size. If it does not work, then you will have to add a different image for different screen sizes.

     

    6 – I am not entirely sure why this is happening but it seems something that is a part of Jet menus which automatically calculates the width and switches the out of width menu into “…” icon and when you hover over the “…” it shows the hidden menu.

     

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Amir Rather Support Team

    Hi There

    I increased the column width of the picture by 1 pixel, please check now 🙂

    Regards

    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    Sorry for a delay.

    As for the button, you need edit the footer in Elementor, open Button element settings and set border radius for all sides.

    As for the menu, please provide correct login details as I can’t log in with the previous ones.

     

    Thank you.

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    Sorry for a delay.

    To remove the space, you need edit the submenu in the JetMenu settings in Appearance > Menus https://take.ms/vOPsw , click on this icon at the top https://take.ms/CdAJ0, then https://take.ms/TMKqX , then Lay-out https://take.ms/74x0P and change 20 to lower value or set to 0 https://take.ms/zC8HVU .

    As for the button, I edited css code to this:

    @media handheld, only screen and (max-width: 767px) {
    #overlap-btn {
    position: unset !important;
    border-radius: 30px;
    }}

    Please check the button on mobile now.

     

    Thank you.

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    Please add this css code:

    .elementor-23150 .elementor-element.elementor-element-16373fe2 .elementor-field-group .elementor-field, .elementor-23150 .elementor-element.elementor-element-16373fe2 .elementor-field-subgroup label {
    line-height: inherit !important;
    }

     

    Thank you.

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    I see the video starts from 10 sec. When I compared to the original youtube video, there is no intro with mobile phones on your site.

    As for the video sound, there is a new thing that Chrome implemented where if video is autoplayed it is muted by default.

    Please read more here:

    https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

     

    To fix the menu, I duplicated your section in the header template and made it visible for tablet only https://take.ms/fbrNCE . To show the burger menu on a tablet device, I set “Mobile view on all devices” in the Mega Menu settings https://take.ms/wKbOq .

    Please check now.

     

    Thank you.

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    1. I changed “On Hover Out” option to “Reverse” https://take.ms/i6Ym9 and seems it did the trick. Please clear your browser cache and check.

    2. Please add this code in Jupiter X > Customize > Additional CSS:

    .elementor-icon.elementor-animation-pulse {
    animation-name: elementor-animation-pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    }

     

    Thank you.

    Regards.

    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Private
    Desiree de Vries
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    1. To hide some pages in search results, you can try this plugin https://wordpress.org/plugins/search-exclude/ .
    2. To add a button in the hamburger menu, you need to create a template in Elementor and create a button there. Then set this template for Mobile layout > Choose After Items Template in the Mega Menu settings https://take.ms/R0xj9 in your header template.
    3. To make the text blue on hover, add this code in Jupiter X > Customize > Additional CSS:
      .elementor-20979 .elementor-element.elementor-element-1d23ae9 .elementor-heading-title:hover {
      color: #225CFF;
      }

    Thank you.

    Regards.

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