Bottom Header - to Top on Scroll
Open the BOTTOM HEADER - to top on Scroll Elementor Template and copy / paste the sections to your Header.
NOTE: See the 3 CSS Sections Below
JUST COPY THE CODE and try it on your site. It looks crappy here. See Wallen That Bar.
CSS CODE for jupiterx-layout-specific.css
/* *****************************
* SINGLE DEFAULT PAGES - Like Privacy Policy
* *************************** */
.page-template-default .jupiterx-main-content > .container > .row > [class*=col-] {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
.jupiterx-main-header {
margin-top: 12rem;
}
CSS CODE from header.css to edit
/* ******************************
* LOGO
* *************************** */
.raven-site-logo img {
max-height: 10vh;
max-width: 25rem !important;
transition: 0.5s ease-in-out 0s;
/* If Logo is gross looking, can try an image-rendering version */
/* image-rendering: -moz-crisp-edges; /* Firefox */
/* image-rendering: -o-crisp-edges; /* Opera */
/* image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
/* image-rendering: crisp-edges;
/* -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
.home .raven-site-logo img { /* IF DOING 0 on HOME ONLY */
max-width: 0 !important;
}
.jupiterx-header-sticked .raven-site-logo img,
.scrolled-down .raven-site-logo img,
.scrolled-down .home .raven-site-logo img {
max-width: 100% !important;
}
/* ******************************
* MENU STYLING
* *************************** */
/* Adjust padding to add to right of all but last link */
.raven-nav-menu-horizontal .raven-nav-menu > li:not(:last-child),
.jet-menu li.jet-menu-item:not(:last-child) {
padding-right: ; /* WE REMOVE THE RIGHT PADDING FOR TOTALLY CENTERED */
}
/* Navigation Menu 100% Height for Submenu to Stick to Header */
@media (min-width: 1025px) {
.header-wrapper .elementor-container,
.header-wrapper .elementor-container .elementor-column {
align-items: stretch !important;
}
.header-wrapper .elementor-container .elementor-column {
min-height: 90px;
}
.header-wrapper,
.header-wrapper .elementor-container,
.header-wrapper .elementor-container .elementor-column,
.header-wrapper .elementor-widget-wrap,
.ha-nav-menu,
.ha-nav-menu .elementor-widget-container,
.ha-nav-menu .ha-wid-con,
.ha-nav-menu .ha-wid-con .ha-menu-container,
.ha-nav-menu .ha-wid-con .ha-menu-container ul.ha-navbar-nav,
.ha-nav-menu .ha-wid-con .ha-menu-container ul.ha-navbar-nav li.menu-item,
.ha-nav-menu .ha-wid-con .ha-menu-container ul.ha-navbar-nav li.menu-item a.ha-menu-nav-link,
.ha-nav-menu .ha-wid-con .ha-menu-container ul.ha-navbar-nav li.menu-item a.ha-menu-nav-link .menu-item-title,
.elementor-widget-raven-nav-menu,
.elementor-widget-raven-nav-menu .elementor-widget-container,
.elementor-widget-raven-nav-menu .raven-nav-menu-main,
.elementor-widget-raven-nav-menu .raven-nav-menu,
.elementor-widget-raven-nav-menu .raven-nav-menu .menu-item,
.elementor-widget-jet-mega-menu,
.elementor-widget-jet-mega-menu .elementor-widget-container,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu .jet-menu-item,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu .jet-menu-item a,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu .jet-menu-item .jet-menu-item-wrapper,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu .jet-menu-item ul.jet-sub-menu,
.elementor-widget-jet-mega-menu .elementor-widget-container .menu-main-menu-container .jet-menu-container .jet-menu-inner ul.jet-menu .jet-menu-item .jet-sub-mega-menu {
height: 100% !important;
min-height: 90px !important; /* Set Min Height */
}
CSS CODE to ADD to header.css
/* ******************************
* BOTTOM MENU BAR
* *************************** */
.header-wrapper .e-con-inner {
height: 100% !important;
align-items: stretch !important;
align-content: stretch !important;
justify-content: space-between !important;
padding: 0 !important;
margin: 0 !important;
}
.header-bottom,
.scrolled-down .header-bottom {
display: flex;
align-items: center !important;
transition: all 1s ease-in-out;
}
:not(.scrolled-down) .header-bottom {
bottom: 0 !important;
top: auto !important;
position: fixed
}
.logo-wrapper {
transition: all .5s ease-in-out !important;
width: 0 !important;
}
.scrolled-down .logo-wrapper {
transition: all .5s ease-out !important;
}
.menu-wrapper {
align-items: center;
display: flex;
flex-grow: 1 !important;
flex-shrink: 0 !important;
height: 100% !important;
justify-content: center;
width: 100%
}
.ul-jet-menu {
justify-content: space-between !important;
}
.header-bottom .raven-nav-menu-horizontal .raven-nav-menu > li ,
.header-bottom .jet-menu li.jet-menu-item {
padding: 0 2rem !important;
}
.jet-mobile-menu__item {
padding-bottom: 3rem !important;
}
.jet-menu-title {
text-shadow: -1px 1px 0 #284529, 1px 1px 0 #5f3318, 1px -1px 0 #A15C32, -1px -1px 0 #60604A;
}
/* SubMenu and Mega Menu Position */
.jet-sub-mega-menu,
.jet-sub-menu {
position: fixed !important;
left: auto;
top: auto !important;
bottom: 95px !important;
}
.jet-sub-mega-menu {
left: 0 !important;
width: 100% !important;
}
body.scrolled-down .jet-sub-mega-menu {
position: fixed !important;
left: 0 !important;
top: 128px !important;
width: 100% !important;
}
The Rest of the Page Content Follows the Hero Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.