Docs

[Desmond T]

I am trying to make my website have a static topbar that then docks with the menu after scrolling past the logo. How would I go about this?

Example of what I want:
http://edgeautosport.com/

My site:
http://www.virtuemotorsports.com/

[Rupok]

Hi there,

Thanks for writing in! I can see you already made this like your given example site. So not sure if you still have the question or already figured it out. Kindly clarify.

Cheers!

[Desmond T]

Hey there, I have somewhat figured it out however the topbar does not actually dock and grab onto the navbar until it scrolls past the bottom edge of the navbar. What needs to be done to correct this?

[Paul R]

Hi,

You can add this under Custom > Javascript in the Customizer.

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >46) {
              $('.x-navbar').addClass("x-navbar-fixed-top");
        }else {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
        }
    });
});

Hope that helps.

[Desmond T]

I have one other problem that I need help with. On mt logobar and topbar with the menu, they are not acting like they are full width. Left and right text align only puts it so far over as if it was in boxed mode. I can increase the width in the custom CSS below but once i start scrolling it snaps back.

.x-topbar {
    max-height: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align: right;
    right: 0 !important;
    width: 100% !important;
}

[Lely]

Hi Desmond,

Please try adding this CSS:

.x-topbar-inner.x-container.max.width,
.x-logobar-inner>div,
.x-navbar-inner>div {
    width: 100% !important; /*Current value is 88%(your current site width in customizer)*/
    max-width: 1300px !important; /*Current value is 1000px(your current site max width)*/
}

Hope this helps.

[Desmond T]

Everything you gave me has worked great!

[Prasant Rai]

You are most welcome. 🙂

[Desmond T]

I am trying to figure out if there is more efficient code that will do this same thing. Do I really need to modify my navbar and topbar .php files, add css and javascript to make this work?

I removed a lot of what i had accomplished because it was just glitchy and not fluid. How can I accomplish this from scratch?

I want a topbar that is fixed, a logobar that disappears when you scroll down, and then the topbar to dock with the navbar as you proceed down the page.

Thanks!

[Christopher]

Hi there,

Yes, what you’re trying to achieve requires customization but we didn’t recommend you to modify topbar and navbar in this thread. Are you following another thread?

I see you’ve already achieved that, let us know how we can help you?

Thanks.

[Desmond T]

I had taken it from another thread which i cannot find at the moment, and then applied the css and javascript from this thread to make it better. It was still glitchy so i removed it and am now trying to rebuild it more efficiently.

[Christian]

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Desmond T]

I confused, can someone just look at my site again and let me know what custom css and java i would need to get the topbar above the logobar again?

[Rupok]

Hi there,

Thanks for writing back. Kindly follow the previous reply. This is something that needs custom development which is out of our support scope. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Desmond T]

So then why was someone willing to help me with the CSS previously in the thread for the same reason? Now its beyond the support?

[Author]

Posts