YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar matteo.camarota.77 asked

Yootheme Pro Sticky Navbar Issue and other problems

Hello, I am using revolution slider in the header and this as a workaround to make the header transparent.
I would like to have the header sticky with a delay in Max (the theme I am using) like it happens if Fjord but I can't make it work. I looked at this answer but can't find the correct way to add the delay code. I tried to read the UIkit documentation and implement it but it doesn't work Can you advise? I would like to have the navbar trasparent like it it right now on the homepage but I also want the navbar to appear with the animation as I scroll and not immediatly.

You can find the website here

Second problem is the gallery/grid in yootheme pro It's not possible to use tag and show elements with tags like it was possible in widgetkit. I decided to use widgetkit but I don't like the overlay fontawesome icon that looks so old but I can't change it because it's displayed with fontawesome and with yootheme pro I can change the css. I would like to have the clean + overlay like in uikit 3 but I wasn't able to make it work.

  • Widgetkit
  • UIkit
  • YOOtheme Pro

Edited

13 Answers

0

Avatar thomas.p Support answered

I couldn't login to test this yet (problem on my end), but can you please try the following

(it worked with a widgetkit slideshow in the first section of a site built with the builder, at least)

  • go to Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->LAYOUT->HEADER
  • set NAVBAR: Static
  • add the class minus-top-margin to your first section
  • add the following at Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code->SCRIPT

        jQuery(function () {     
            UIkit.sticky('.tm-header', {top: '100vh'});  
        }); 
    
  • add the following at Extensions->Templates->yootheme->OPEN WEBSITE BUILDER->Settings->Custom Code->CSS/LESS

    /* overlay slideshow */  
        @media(min-width: 960px) {      
            .minus-top-margin {      
                margin-top: -80px;    
            }      
    
            .tm-header {      
                z-index: 1;  
                margin-top: 80px;       
            }      
        } 
    

Further Reading about the options for the UIkit 3 sticky component

Edit: I forgot to mention that you need the class minus-top-margin

Edited

0

Avatar thomas.p Support answered

Hi matteo.camarota.77,

I can offer to take a first hand look for the navbar question.

If you want me to do that, please click Edit at the bottom right of your initial question (= the first post in this thread) and then use Add hidden information at the bottom left to provide the following:

  • Access data for a Super Administrator (no lesser level!) of your CMS: Administration URL, user name, password.

  • FTP access data: FTP protocol (FTP, SFTP, ..., active/passive mode?), Server, user name, password, port, initial directory.

This information will only be visible to yourself and the YOOtheme support team.

Important:

  • Make a full backup before you grant access to your site by giving these details!

  • From time-consuming experience: Before you post the credentials try them yourself to log in! — use what you actually posted — to make absolutely sure they work or a new account you might have created was activated.

For the gallery question: According to this support system's policy of "One question per question" create a new, separate question (= thread) on each issue, please.

When you do so, please provide as much details as possible to improve your chances of getting a useful answer, and of course post a link to your site and a page showing your issue.

Do not ask more than one question at a time, do not add further questions to the same question/thread.

This is not meant to put you off but rather to be able to focus on one issue at a time in order to help you and others with a similar problem.


Thank you

0

Avatar matteo.camarota.77 answered

Hi thomas, I would like to do it by myself if it's possible. Just because I would like to learn how to do it. If you need more info I can provide it to you but the only code added to the website is the one linked above. I added the minus-top-margin class to the header section with revolution slider and added the class in the custom css with this code

@media(min-width: 960px) {      
    .minus-top-margin {      
        margin-top: -80px;    
    }      

    .uk-logo, .uk-navbar-nav, .uk-navbar-item {      
        z-index: 1;         
    }      
}  

Also it's interesting that if I use this code and bring the margin back i have the slider with the animation as I want but no menu over the slider at the very beginning

jQuery(function () {    
  UIkit.sticky('.tm-toolbar');      
  jQuery('.uk-navbar-container').attr('offset', '-80');    
});

I was wondering if there is a better way around in order to achieve what I want because this workaround give me issue on mobile too. Since the header is at -80px on mobile I have a 80px blue bar and the header with the slider finish after the screen of the device. If I bring the mobile navbar at -80px everything is fine but the navbar of course disappear.

That's how it should work

Edited

0

Avatar thomas.p Support answered

Thank you for the hints added. I usually would not change anything permanently on your site without asking before and also provide an explanation what to change in order to achieve the desired effect.

I asked for backend and ftp access, because Slider Revolution is a paid WordPress plug-in I do not have and, therefore, can't test.

0

Avatar matteo.camarota.77 answered

thomas I provided the info to log in. By the way since you are new to revolution slider the only parameters that makes diferrence in order of slider height and responsiveness are into slider setting. The slider editor with images and animation is a mess.

Edited

0

Avatar matteo.camarota.77 answered

It doesn't work... at least not as expected. With your settings the navbar is transparent over the slider but it stays transparent for all the website. Check the website too see what I mean.

I added this in order to give a color to the navbar but doing so it goes over the slider too...

.tm-header {  
    background: #ff6666;  
}

I start thinking that maybe it's too much work. I am a bit sad because revolution slider is one most used wordpress plugin for cool animation intro and I miss the fact that it's not possible to integrate it in yootheme pro. By the way thanks for the time you are spending with this issue

0

Avatar thomas.p Support answered

Try this CSS instead

.tm-header-transparent.uk-sticky-fixed {  
    background: #ff6666;  
}
0

Avatar thomas.p Support answered

Thanks! It seems to work but it lacks the fade animation...

Correct, I forgot about the animation. I believe that the default sticky navbar has a slide-top animation, not a fade animation. Try to amend the scrip as follows

jQuery(function () {     
  UIkit.sticky('.tm-header', {top: '100vh'});  
  jQuery('.tm-header').attr('animation', 'uk-animation-slide-top');  
}); 
0

Avatar matteo.camarota.77 answered

Works perfect! Last thing I swear, when you scroll down to a certain point you will notice that something like a gap happen at certain precise scrolling point, exactly when the navbar come into place. Any way to fix it?

Also if you shrink the browser to mobile phone size you notice that the mobile bar 80px, pushes down the slider and doesn't make it fit to the header section but it finish right below. Any way to fix it?

Again, thanks a lot for you effort.

0

Avatar thomas.p Support answered

For the mobile header, please try this CSS

@media(max-width: 960px) {  
    .tm-header-mobile {  
        position: absolute;  
        width: 100%;  
        z-index: 1;  
    }  
}

Don't have an idea why the navbar grinds to a halt, though. I didn't see this with my WK demo.

Edited

0

Avatar matteo.camarota.77 answered

It worked thanks. Also I noticed this at the top of my question.

Unsupported customizations fall outside the scope of our our technical support service. The question will still be available for review by the community, but please understand that you might not get an official answer from our support team.  

Customizations often require an extensive amount of time and solid knowledge of web technologies and programming skills.  
You might also consider hiring a developer to do your customizations for you.  

For details about what cannot be supported by us, please review the Support Policy.

Sorry for asking a lot of stuff but I am still getting used to yootheme pro and it's kind hard for me to customize it as I used to do with old theme

0

Avatar thomas.p Support answered

Sorry for asking a lot of stuff but I am still getting used to yootheme pro and it's kind hard for me to customize it as I used to do with old theme

No problem, you are welcome. It's just a hint to differentiate between customization and standard support.

Know someone who can answer? Share a link to this question via email or twitter.