Sticky menu with changeble background, font color and logo, footer

[Tanya]

Hello! My team has website https://helpware.io/ it’s on Divi buildr now, we currently remaking this website on your X-theme(we don’t have PRO and not going to have it this time) and I didn’t know that it could be a really big problem to make menu like on our old website.
Could you please help me?

First of all I want to have menu exactly the same like on link that I provided, I search and tried to implement manu of JS and CSS codes but nothing worked as I wanted, I even tried to make this via MyStickymenu plugin but it doesn’t work like I want.

What I made?
This code which I found on your forum that helped me but just with logo changing here it is:

JS:

jQuery(function($) {
$(window).scroll(function() {
var W = $(window).width();
if ( W < 1800 ){
if($(window).scrollTop() > 50) {
$(’.x-navbar .x-brand img’).attr(‘src’,‘http://www.helpware.solutions/wp-content/uploads/2018/10/HELPWARE-Logo.png’);
$(’.x-navbar’).addClass(‘down’);
}else{
$(’.x-navbar’).removeClass(‘down’);
$(’.x-navbar .x-brand img’).attr(‘src’,‘http://www.helpware.solutions/wp-content/uploads/2018/10/HELPWARE-Logo-1.png’);
}
}
});
});

and CSS:

@media (max-width: 1800px){
.down {
position: fixed;
}

.down .x-navbar-inner {
min-height: 85px;
}

.down #x-btn-navbar {
margin-top: 30px;
}
}

So now it’s changin just logo I want this code to change backgoround and font-color(hover effect as well) like here: https://prnt.sc/ladvc8
Also I tried to make it via UberMenu but it also disn’t help to solve a problem
I cant find that information anywhere and every code that I found don’t work for me, and this theme doesn’t have such function.
I worked on it for a week and come to nothing.

Also I have question about Footer is there any possibility to swap widget area with menu and add logo there?
For example I want footer almost the same like here: https://prnt.sc/ladz4e
Can I have two rows for example with widget area for example first row with two widgets where I can put logo and second wide widget where I can put text with links
Second row 4 widget area for another stuff
Now I have just this option: https://prnt.sc/lae0lv

Thats wiers that you don’t have customization of footer and menu/header to make it like customer wants, just for PRO version…

Help me please with that question, I realy like your prod but I didn’t thought that you don’t have that feature for footer and header, thats a big problem.
My version of X-theme: 6.2.5 (new doesn’t work for me for this time)
My current website: http://www.helpware.solutions

[nabeel]

Hi Tanya,

Thank you for reaching out to us.

• For the header, you can simply replace your CSS with the following code:

@media (max-width: 1800px) {
    .down {
      position:fixed;
      background: #fff !important;
      transition: all 0.3s ease-in-out;
      margin-top: -12px;
    }
    .x-brand {
      margin-top: 20px;
    }
    .down .x-navbar-inner {
      min-height: 85px;
    }

    .down #x-btn-navbar {
      margin-top: 30px;
     }
     .x-navbar.down .desktop .x-nav > li > a, .x-navbar.down .desktop .sub-menu li > a {
       color: #000;
     }
     .x-navbar.down .desktop .sub-menu {
       background: #fff !important;
     }
}

.x-navbar {
    transition: all 0.3s ease-in-out;
}
.x-navbar:not(.down) .desktop .x-nav > li > a:hover, .x-navbar:not(.down) .desktop .x-nav > li.x-active > a, .x-navbar:not(.down) .desktop .sub-menu li > a:hover  {
  color: #fff !important;
}

• For the footer, you can use Global Blocks (see https://theme.co/apex/forum/t/global-blocks/24723). With Global blocks you can design content once and then assign it to multiple locations on your website. You can use it as a footer section in all of your pages.

If you’ve complex header and footer customization then I’d recommend you to use Pro instead. Please understand that X theme is for beginners and intermediate users. Pro theme is more on for intermediate and advanced users like designers and developers.

PRO offers the header and footer builders that give you extreme possibilities to design your header and footer. Please see https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

Hope this helps!

[Tanya]

Thank you very much for help with menu! It works perfectly!
Unfortunatly I can’t buy Pro because I’m bulding website inside the company where I work and it’s quite simple website and for the future we also don’t need this license.
For personal use I would like to buy it for sure.
Thanks for advice, I’ll try to create footer with global box, thanks!

[Tanya]

Just one more question, I just can’t find any information about it just simple not working answers. Now it works as I want but for transparent backgrounds and it looks good if I have image on a background but not the white color for this situation http://www.helpware.solutions/pricing/ is there any exit? Just to change logo into gray and font-color into black if it white background, or css and js not able to recognize background even if I code such a rule? Thanks!

[basanta]

Hi Tanya,

Thanks again for asking!
The URL you sent is the under-construction mode, so can’t check it.
Also, I am not sure what exactly you want to achieve here. Can you please more descriptive or can post the screenshot, what exactly you want, so that we can suggest you better.

Thanks

[Tanya]

Oh, sorry, opened it http://www.helpware.solutions/pricing/
I mean that I have menu and top header which are transparent and becoming with white background, black font and gray logo on scrolling can I do something with this if I have white page with out image on top look screenshots please
when top section has background https://prnt.sc/lcahjt
when topsection just white https://prnt.sc/lcahql
Is there any possibilities to make header with black font and gray logo on white backgrounds? like here https://helpware.io/pricing/

Regards

[christian]

Hey Tanya,

It is technically possible, however, we would need to work on additional custom code for this and it’s already veering into custom development work which is outside the scope of our support.

We understand that X does not have this feature. But, this does not mean that we will create features as part of our support service. We sometimes go above and beyond like what we did here but we can’t continually custom code and give support for them. I’m sorry if this wasn’t made clear before.

Also, the code you see here in the forum only serves as guides. As you have seen, nothing worked for you before because most codes suggested here are for specific cases. Now @Nabeel went above and beyond and fixed the code for you.

I understand you can’t buy Pro because of budget restrictions but, creating custom specific features is a paid job as well. Pro was created to meet the demand of users for a custom header with more features like what you need now.

I hope you understand our position also.

Thank you.