#70448 Nav bar above image 50% above image slider

Landing Forums JupiterX WordPress Theme Nav bar above image 50% above image slider

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • josephhh

    Hello,

    I’m trying to replicate this navbar https://i.imgur.com/DZ5J5PU.png (50% above image) but I can only align it with the top image or slider: please check url in shared in the website credentials.

    How can I do it?

     

    thank you

    Nodari Support Team

    Hi Joseph

    Ok, I got it but, but what is the problem? what exactly you cant create? I need to know where you stuck to help you,
    Please also provide access details to your site, this will speed up resolution time of your problem

    Thanks

    Private
    josephhh
    This reply has been marked as private.
    Amir Rather Support Team

    Hi There

    Since your design is different than the example with more elements on your Header, do you want to show the navigation like this screenshot

    This can be done by giving the Navigation section a –18px top margin.

    Let me know if you mean something else πŸ™‚

    Regards

     

    Private
    josephhh
    This reply has been marked as private.
    Amir Rather Support Team

    Hi There

    This isn’t a Jupiter site but the slider is Revolution Slider which is available in Jupiter X, also this can be created with Jet Element Slider as well.

    see https://themes.artbees.net/docs/sliders-in-jupiter-x/

    Please try and let us know if you need assistance πŸ™‚

    Regards

    Private
    josephhh
    This reply has been marked as private.
    Amir Rather Support Team

    Hi There

    This slider is quite complex and needs to be created from scratch which is beyond our general support policy.

    If you want to achieve it now you can hire a developer with our premium customization service by accessing this:

    https://wpdone.artbees.net/

    Hope you understand this matter, thank you so much πŸ™‚

    Private
    josephhh
    This reply has been marked as private.
    Amir Rather Support Team

    Hi There

    1) Please try this CSS:

    body .jupiterx-site {
        overflow-x: hidden !important;
    }

    2) For the Background Image, it is better to use a Fixed Height rather than full-screen height, so it shows correctly on mobiles.

    Regards

    Private
    josephhh
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

    The reason may be some 3rd-party plugin is causing the issue.
    To make the image full height on mobile, add this code in Jupiter X > Customize > Additional CSS:

    @media (max-width: 767px){
    .elementor-12 .elementor-element.elementor-element-bf7070a:not(.elementor-motion-effects-element-type-background), .elementor-12 .elementor-element.elementor-element-bf7070a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    height: 100vh !important;
    }}

    Let us know the result.

    Regards.

    Private
    josephhh
    This reply has been marked as private.
    Tatyana Hutsol Support Team

    Hello,

     

    Please also add this css code:

    @media (max-width: 767px){
    .elementor-section-height-full {
    height: 100vh !important;
    }}

     

    Thank you.

    Regards.

    josephhh

    Hi,

     

    It worked, thank you.

    But why the need?! Its a common feature on themes to be able to set full screen without CSS..

     

     

     

    Tatyana Hutsol Support Team

    Hello,

     

    On mobile it used the height 100%, not the viewport height, that’s why we used css code.

     

    Thank you.

    Regards.

    josephhh

    Thank you

    Tatyana Hutsol Support Team

    You’re welcome πŸ™‚

     

    Regards.

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