Skip to main content

To Top position and make sticky

Make a To Top element in the footer:

go to the tab Advanced in the element

 /*make the button sticky at the bottom*/

.uk-totop {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1;
}

 Then make the To Top disappear at the top of the page and appear on scroll!!!

Navigate to YOOtheme > SETTINGS > Custom Code, and into the field labeled "SCRIPT" insert the following:

  // Add an attribute data-scroll to the html element
  // Source: https://css-tricks.com/styling-based-on-scroll-position/
  // The debounce function receives our function as a parameter
  const debounce = (fn) => {
      // This holds the requestAnimationFrame reference, so we can cancel it if we wish
      let frame;
      // The debounce function returns a new function that can receive a variable number of arguments
      return (...params) => {
                  // If the frame variable has been defined, clear it now, and queue for next frame
          if (frame) { 
              cancelAnimationFrame(frame);
          }
          // Queue our function call for the next frame
          frame = requestAnimationFrame(() => {
              // Call our function and pass any params we received
              fn(...params);
          });

      } 
  };
  // Reads out the scroll position and stores it in the data attribute
  // so we can use it in our stylesheets
  const storeScroll = () => {
      document.documentElement.dataset.scroll = window.scrollY;
  }
  // Listen for new scroll events, here we debounce our `storeScroll` function
  document.addEventListener('scroll', debounce(storeScroll), { passive: true });
  // Update scroll position for first time
  storeScroll();

 Then if it doesn't work add this

  • Into the field "CSS/LESS" insert the following CSS to make the To Top fade away:

      html[data-scroll="0"] .uk-totop {
      opacity: 0;
      transition-property: opacity;
      transition-duration: 600ms;
      }
    

    Or alternatively just hide it:

      html[data-scroll="0"] .uk-totop {
      display: none;
      }

 YOOtheme answer:

https://yootheme.com/support/question/167313#answer-540905

 

This was the original to top css, the above has worked better for me.

  .el-element {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1;
  }

 

  • Hits: 12

Accordion - center middle the text in the rows - center accordion

Good for very long questions that run to 2 or more lines.
Add the CSS to the page as it stops the title in the panel element from centering.

/*force the title into the middle of the row. */
accordion
.el-title {
display: flex;
align-items: center;
}

.el-title {
margin:0 auto;
}

  • Hits: 14

add button padding and remove text line height

/*added padding to buttons having lessened the line height for longer button content*/
.btn-info, .btn-primary, .btn-success, .uk-button-primary {
line-height: 1.6;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 60px;
padding-top: 10px;
}

  • Hits: 13

Make main menu and mobile bold on hover rollover and active

Make sure the Google Font sizes have been loaded into Style / Google Fonts Variants

load google font variants

/* 1. Main menu - active menu item bold without jumping*/
.uk-navbar-nav > li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 2. Main menu - hover menu item bold without jumping*/
.uk-navbar-nav > li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 3. Main menu Drop down sub menu - active menu item bold without jumping*/
.uk-navbar-dropdown-nav>li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 4. Main menu Drop down sub menu - hover menu item bold without jumping*/
.uk-navbar-dropdown-nav> li:hover > a {
font-weight: 700;
letter-spacing: 0.7px;
}

/* 5. Mobile menu - active menu item bold without jumping*/
.uk-nav-default> li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 6. Mobile menu - hover menu item bold without jumping*/
.uk-nav-default> li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 7. Mobile Drop Down Sub menu - active menu item bold without jumping*/
.uk-nav-default .uk-nav-sub li.uk-active>a {
font-weight: 700;
letter-spacing: 0.4px;
}
/* 8. Mobile Drop Down Sub menu - hover menu item bold without jumping*/
.uk-nav-default .uk-nav-sub li:hover > a {
font-weight: 700;
letter-spacing: 0.4px;
}

  • Hits: 19

CSS for changing background and text colors in a grid

.uk-grid-item-match>:not([class*=uk-width]), .uk-grid-match>*>:not([class*=uk-width]) {
background-color: #001446;

    
.uk-panel>:last-child {
color: #fff;
    }
   
h3.el-title  {
       color: #fff}

p {
color: #fff}
    

 

  • Hits: 12