Bottom Header
Open the BOTTOM HEADER Elementor Template and copy / paste the sections to your Header. NOTE: See the 2 CSS Sections Below JUST COPY THE CODE and try it on your site. It looks crappy here. See YEARB4
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.25s 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) */
}
/* USE THIS IF YOU WANT TO HIDE LOGO UNTIL YOU SCROLL */
/*
.raven-site-logo img {
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: 20rem !important;
max-height: 8vh;
}
@media (max-width: 390px) {
/* Mobile Logo
.raven-site-logo a img {
max-width: 200px;
}
*/
}
/* 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: ;
}
.jet-menu li.jet-menu-item .jet-sub-menu-item {
padding-right: 0 !important;
}
.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 .jet-sub-mega-menu {
height: 100% !important;
min-height: 90px !important;
}
@media (max-width: 1024px) {
/* HEADER */
.elementor-widget-jet-mega-menu {
width: 100% !important;
}
.jupiterx-header-mobile-behavior-off .jupiterx-header.jupiterx-header-sticky-custom.jupiterx-header-custom > .elementor:last-of-type:not(:first-of-type) {
display: block !important;
top: 0 !important;
}
.admin-bar.jupiterx-header-sticked .jupiterx-site:not(.jupiterx-site-body-border) .jupiterx-header.jupiterx-header-sticky-custom.jupiterx-header-custom > .elementor:last-of-type:not(:first-of-type) {
top: 46px !important;
}
}
/* ******************************
* MOBILE HEADER
* *************************** */
/* MOBILE HEADER CONTAINER - adjust width to make it wider than default 400px */
/* .jet-mobile-menu .jet-mobile-menu__container {
width: 90%;
} */
/* MOBILE MENU */
.jet-mobile-menu__toggle-icon:after {
content: "menu";
width: 100%;
font-size: 2.5rem;
padding-left: 10px;
text-align: center;
}
.jet-mobile-menu__toggle-icon {
width: 100%;
flex-direction: row;
}
.jet-mobile-menu [aria-label="Back to Prev Items"].jet-mobile-menu__back .hm-cross:before {
content: "\e90a";
}
span.jet-menu-label {
transform: translateX(0rem);
transition: all .5s ease !important;
}
span.jet-menu-label:hover {
transform: translateX(2rem);
transition: all .5s ease;
}
/* Mobile Menu Icon Animation - check to make sure ok on computers and on actual non hoverable devices - e.g. rotate twitches on mobile if no rotate, you may not need the separate :hover query -just put keep the hover rotate code and remove the hover query. */
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon i,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon svg {
transition: all .5s linear !important;
transform: rotate(0deg) !important;
}
@media (hover: hover) {
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon i,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon svg {
transition: all .5s linear !important;
transform: translateX(0px) !important;
}
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon.active i,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon.active:hover i,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon:hover i,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon.active svg,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon.active:hover svg,
.jet-mobile-menu__toggle .jet-mobile-menu__toggle-icon:hover svg {
transition: all .325s linear !important;
transform: translateX(10px) !important;
}
}
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;
}
/* Align Mobile Icon Left */
.jet-mobile-menu__instance {
align-items: flex-start !important;
}
/* SubMenu and Mega Menu Position */
.jet-sub-mega-menu,
.jet-sub-menu {
position: fixed !important;
left: auto !important;
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.