PLEASE FOLLOW THIS HELPFUL GUIDE FOR SUCCESSFUL DEMO IMPORT.

- Our working time is from 9am until 5pm CET during weekdays.

- Tickets are ordered from oldest to latest, so please be patient, we will refer to your issue as soon as possible.

- When you submit a ticket, it would be really helpful if you could provide our agent with your website URL and wp-admin access in your private ticket. In that way, we will refer to your issue easier and faster.

Okay
  Public Ticket #1833474
Header / Sticky Header
Closed

Comments

  • Tsalver started the conversation

    1) When I am displaying the website on a desktop screen, than scale the window down, it shows a double menu bar or it shows a menu bar below header column. See screenshot. How can I get it to stop doing that? 

    2) I am having trouble finding a way to get the sticky header to display as light skin. You can see on any one of our pages, our static menu bar displays as light skin, but the sticky header is showing with dark. See screenshot. Thanks!

    Attached files:  Screen Shot 2018-12-26 at 2.26.32 PM.png
      Screen Shot 2018-12-26 at 2.26.24 PM.png
      Screen Shot 2018-12-26 at 2.29.39 PM.png

  •   Mikado replied privately
  • Tsalver replied

    Thank you so much for that code. That has helped our issues.

    Regarding sticky header. I think I am talking about the skin. The font is displaying correctly in white, but the Cart icon and search icon are black. Please see screenshot.

    Attached files:  Screen Shot 2018-12-27 at 5.01.20 PM.jpg
      Screen Shot 2018-12-27 at 5.01.14 PM.jpg

  •  1,774
    Mikado replied

    Hi,

    Thank you for writing in.

    Go to Appearance -> Customize -> Additional CSS and add this code

    span.mkdf-icon-font-elegant.icon_search {
        color: #feca30 !important;
    }
    .mkdf-shopping-cart-holder .mkdf-header-cart .mkdf-cart-icon {
        color: #feca30 !important;
    }
    

    Let us know if we can help you with anything else.

    Cheers,

    Nikola


    Customer Support

    Here you could check our work :) !

  •   Tsalver replied privately
  •  1,774
    Mikado replied

    Hi,

    Sorry for the late response.

    Regarding your issues:

    1) Could you please provide us with page urls and screenshots with the attributes you don't want show, and we can try to help you with some custom css solutions?

    You would need to do this for each tour item seperately.

    2) When it comes to 3rd party plugins, you have to understand that we didn't and couldn't test all plugins out there with our themes. Of course, some compatibility issues might occur once in a while and there's nothing we can do about that. The official plugins we provided bundled inside our theme are the ones that are tested several times before the theme was launched and we guarantee their functionality. If you're having issues with any other plugin you downloaded yourself, please refer to the author of the plugin or the team behind it. 

    Thank you for understanding.

    I hope this was helpful.

    Let me know if you need anything else.

    Best regards,

    Sasha S


    Customer Support

    Here you could check our work :) !

  • Tsalver replied

    Thanks Sasha,

    -On this page: I am having the same thing for a row that doesn't respond to responsive settings. I would like to figure the issue out without using CSS, because they theme was made to be responsive, and I don't want to use extra code if I do not need to. Please see link: https://drakebaybirdwatching.com/drake-bay-hotels/luxury-hotel/aguila-de-osa/ and attachments. When the row with the elements is viewing on phone or some tablets, it cuts off the photo on the bottom in responsive mode. The same element works fine on this page though: https://drakebaybirdwatching.com/drake-bay-hotels/luxury-hotel/copa-de-arbol/

    -Also for those same pages, I am having trouble with the contact for being so big. I do not need so much space for the input fields. Could you maybe help me with that? 

    Thank you :)

    Attached files:  Screen Shot 2019-01-17 at 1.26.16 PM.png
      Screen Shot 2019-01-17 at 1.26.23 PM.png

  •   Mikado replied privately
  • Tsalver replied

    Thank you Sasha.

    For one, this CSS did not solve my issues. please refer to the issues below for a reminder what happened. The issue is still present. 

    Also, I am having trouble because I want to make my Header Images on some pages Paralex, however when I choose that option for the Header, it crops and distorts the image. How can I choose Parralex without changing or cropping the image? 

    Thanks in advance.

  •  1,774
    Mikado replied

    Hi,

    Thank you for writing in.

    In order to customize that elements I added this custom CSS code in Appearance >> Customize >> Additional CSS:

    @media screen and (max-width: 991px) {
        .wpb_column.vc_column_container.vc_col-sm-12.vc_col-lg-6.vc_col-md-6.vc_col-has-fill {
            width: 50%;
        }
    }
    @media screen and (max-width: 580px) {
        .wpb_column.vc_column_container.vc_col-sm-12.vc_col-lg-6.vc_col-md-6.vc_col-has-fill {
            width: 100%;
        }
        
        .vc_column-inner.vc_custom_1549633466679 {
            height: 380px;
        }
    }
    

    I tested detailed every set up from WP Bakery and with this CSS should be fine.

    For form section I reduced margins and padding with this code:

    .vc_column-inner.vc_custom_1545368708710 form .wpcf7-form-control.wpcf7-text {
         margin: 0 0 10px;
         padding: 10px 18px;
    }
    

    Regarding header images do you maybe want to achieve Transparent Header layout?

    In order to achieve a Transparent Header layout, you need to navigate to Theme Options > Header and set these two options:

    - Background color > (any color, but it's required) - Background transparency > set to 0

    https://www.screencast.com/t/ASrJkTzI7

    Also note that these are Global Options. And each page these same options from above, and if set on the page, it will override Global Options..

    So you need to go to Dashboard > Pages > find and Edit single page >  scroll towards the bottom > check if these two options are set already.

    Let us know if there's anything else.

    Best regards,

    Jim


    Customer Support

    Here you could check our work :) !

  • Tsalver replied

    Thanks Jim for your code.

    My only concern is I will reproducing the pages that you added the code to fix the responsiveness of the element. The code is working great, but when I create another page from that pages template, I continue to have the same problem. Where when I change the photo of that element, it doesn't not respond into a one column. It instead hides the photo again.

    How can I correct this without additional CSS?

    -When I mean header transparency, I mean a transparency of maybe 15%. Right now I see only options for totally clear headers of completely opaque. I would like it to have a transparency of a certain percent.

    Thanks again

  •  1,774
    Mikado replied

    Hi,

    Thank you for writing in.

    For new page you can try to set up layout like this:

    https://www.screencast.com/t/u0yk1oHsl

    One full width row with two columns where can you add your elements.

    For responsive view you can try to modify columns options:

    https://www.screencast.com/t/1A6IO8zAkBn

    About transparency you can achieve something with CSS like this:

    https://www.screencast.com/t/pXxbyjoh

    Regards,

    Jim


    Customer Support

    Here you could check our work :) !

  • Tsalver replied

    Thank you Jim for your help.

    For number 3 I do not see any CSS code to use?

    Can you please respond as soon as you can for menu bar transparency?

    The example you sent in the screenshot is perfect. That is exactly what I was hoping to achieve.

  •  1,774
    Mikado replied

    Hi,

    Thank you for writing in.

    On screenshot you have the CSS code, this one:

    .page-id-2325 .mkdf-page-header .mkdf-menu-area {
        background-color: rgba(53,53,53, 0.3);
        margin-bottom: 1px solid #D1D1D1;
    }
    

    I can see that you already have added CSS code to customize that:

    https://www.screencast.com/t/JHRUZdQlYEr

    Let us know if there's anything else.

    Regards,

    Jim


    Customer Support

    Here you could check our work :) !

  • Tsalver replied

    Thanks Jim for your response.

    Yes I figured out the code.

    One other issue is, you had provided code to remove the 'cart' button on the menu header bar.

    But I still see it on the sticky header.

    Could you help provide code to remove the cart button on sticky header also?

    Thanks!

  • Tsalver replied

    Also,

     for Tour Search pages, how do you edit them? Change the Header image etc?

    Thanks

  •   Mikado replied privately
  • Tsalver replied

    Thank you Sasha that has been very helpful info. You have really helped me solve this!

    I have just another question if I could ask for your help. Very close to finishing up the website :)

    I am having issues again with responsive views cutting off images.

    Can you please see this page for example. https://drakebaybirdwatching.com/destinations/sierpe-river/ (attached screenshots of row area that is having issues). I tried to recreate some CSS code you provided with a new class name, but it doesn't work. I also used a template I created from another page where it is working ok. It still did not work. 

    Secondly, I will be using this style row in several other pages and I hope to not have to bother you everytime I need help.

    Can you give me easy solution?

    Thank you for all your kind help.

    Attached files:  Screen Shot 2019-03-06 at 5.02.18 PM.png
      Screen Shot 2019-03-06 at 5.02.09 PM.png

  •   Mikado replied privately