Docs

[t1mduma5]

Domain: http://www.consciousagingflorida.com
X Theme: 4.5.2
X-Child: 1.0.0
Cornerstone: 1.2.4

I have a client who is insisting on a particular layout. They want a fixed thick header (as shown). A fixed sidebar with the main menu in the sidebar (as shown). Also, the logo extending beyond the sidebar width (as shown).

How can I adjust the CSS to blend the positioning of the sidebar so it doesn’t shrink or jump down when you quickly scroll to the top of the page or just pull the top of the page down from the top of the browser. I have attached to images that show the menu states for the above conditions. Please view the menu jumping directly at the address above.

Screenshot caf-menu-fixed.png: This shows the menu in it’s default state with the correct width, height, left/right positioning. I want the menu placement here to match the placement in the other file (cad-menu-pull-down.png).

Screenshot caf-menu-pull-down: This shows the menu when you pull the top of the page down. This has the correct menu top positioning. I want this menu to match the width, height, left/right in the other file (caf-menu-fixed.png)

The CSS that for the sidebar is below. It is in Customize | Custom | Edit Global CSS.
The Javascript that fixes the sidebar is below. It is in Customize | Custom | Edit Global Javascript.

Thank you for your time and consideration,
Tim

CSS for Sidebar

@media screen and (min-width: 979px){
   .fixedsidebar {
      position: fixed;
      top: 10.25em;
      /* left: 10%; */
      width: 15%;
      max-width: 180px;
      margin-right: 10px;
      margin-left: 10px;
      height: 100%;
   }
}

@media (min-width: 980px) {
   .x-main {
     width: 83%;
   }
   
   .x-sidebar {
      top: 10.25em;
      /* left: 10%; */
      width: 15%;
      max-width: 180px;
      margin-right: 10px;
      margin-left: 10px;
      height: 100%;
      background-color: #e0ddd6;
   }
  
  .widget_nav_menu {
    background-color: #e0ddd6 !important;
  }
}

#menu-x-demo-menu-2 > .menu-item {
  margin-left: 5px;
  background-color: #e0ddd6 !important;
}

JS for Sidebar

jQuery( function($){ 

$(window).on('scroll', function(){
    var sidebar = $('aside.x-sidebar.left');
    
    $( sidebar ).removeClass('fixedsidebar');

    if ( $( this ).scrollTop() >= $(sidebar).offset().top
 - 200 ) {
console.log('fixed attached');
      $( sidebar ).addClass('fixedsidebar');
    } 

console.log('scrolled');

});

$(window).trigger('scroll');

});

[Christian]

Hey there,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. 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.

[Author]

Posts