Docs

[MeandHarpua]

Hello,

I am using the ethos stack, and I have my main nav bar on the left, with the ethos post carousel on the top, and the top bar underneath that. When people scroll down the page, I’d like the top bar to stick to the top of the screen. I turned the top bar into a menu bar by changing the functions.php to allow shortcode in the top bar, then I put uber menu items in the top bar. So far it’s working out ok, but I want the top bar to stick to the top when scrolling down the page, then when you scroll to the top I’d like the top bar to position itself back under the ethos post carousel.

Btw, I would like to suggest that you make the top bar a theme menu area. That would have made this a lot easier for me.

Anyways, looking forward to your assistance! Great theme by the way! Thanks so much!

[Jade]

Hi there,

Please follow the suggestion in this thread: https://community.theme.co/forums/topic/make-logo-bar-and-top-bar-sticky-on-a-boxed-site/#post-367297

Hope this helps.

[MeandHarpua]

Thanks for that thread link suggestion, but that CSS code from that thread link did not work at all for me. It seems to only “hold” the top bar to the top of the page the whole time. It also rearranged and broke a bunch of other things on my site like the main left mounted nav bar. I want the top bar to stick to top when page scrolls down. The top bar located on my side about an inch or two from the top of the page down (a few hundred pixels perhaps) under the post carousel. When one scrolls the page down, once the top bar reaches the top of the page, that’s when I’d like it to stick to the top of the page and stay there. This is different than it just being stuck to the top of the page the whole time. Do you get what I’m asking? I can show you my page but I have the “under construction” add-on activated since this is a brand new site I haven’t launched yet. If there’s some way I can show you please let me know. I’d very much appreciate your help with this! thanks!

[Rupok]

Hi there,

Please provide your URL and credentials in a private reply (if you have under maintenance mode active).

Cheers!

[MeandHarpua]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back.

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

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        topbar = $('.x-topbar');

    if (scrollPos > 400) {
      topbar.addClass('fixed-topbar');
    } else {
      topbar.removeClass('fixed-topbar');
    }
  });
});

Then add this under Custom > CSS in the Customizer.

.x-topbar.fixed-topbar {
  left: 293px;
  position: fixed;
  right: 0;
  top: 0;
}

Hope this helps.

[MeandHarpua]

it worked! thank you very much!

[Prasant Rai]

You are most welcome. 🙂

[MeandHarpua]

I have another inquiry. How can I get the top post carousel text on the black transparent area to go to two lines instead of only allowing for one line of text, then it adds the “…” and just cuts off. This would be for the ones with longer text headline lengths. I want to have it show the full wording instead and not have the (…) part and just cut off like it does now.

Thank you!

[Paul R]

Hi,

Your site is currently under construction mode.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Author]

Posts