- This topic has 1 reply, 2 voices, and was last updated 3 years, 7 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
August 9, 2020 at 8:53 am #1394154Neal
Hello,
Can you help me with the css to customize the header? I’d like for the header to have the following:
-
* On desktop, logo is aligned to the left, primary nav is aligned to the right, search is to the right of primary nav, no off-canvas menu.
* On tablet/mobile, off-canvas menu is float aligned left, logo image is centered, search icon is on the right hand side. Close icon ‘X’ is aligned to the top right and says ‘Close X’
* Essentially, I want the off-canvas menu to behave like it does for this site https://www.realestatedirect.comThis css gets me close, but has a few issues. The logo is always centered, but I only want it centered for tablet/mobile and left aligned for desktop. It doesn’t play nice with the search icon:
/* Arrange Header elements */ .inside-header { display: flex; flex-direction: row-reverse; align-items: center; } /* Abs position logo center */ .site-logo { position: absolute; left: 50%; transform: translateX(-50%); } /* Force nav left and site title right */ .site-branding { margin-left: auto; } .site-branding { text-align: right; } /* Tablet */ @media (max-width: 1024px) and (min-width: 769px) { .inside-header { padding: 5px; align-items: center; } .site-logo { width: 150px; height: auto; } .site-branding { width: 8ch; /* Change width of site title */ margin-bottom: 0 !important; } .site-description { font-size: 10px; /* change fornt site */ } } /* Mobile */ @media (max-width: 768px) { .inside-header { padding: 5px; align-items: center; } .site-logo { width: 200px; height: auto; } .site-branding { width: 8ch; /* Change width of site title */ margin-bottom: 0 !important; } .site-description { font-size: 10px; /* change fornt site */ } } /* Make Header Sticky */ .site-header { position: sticky; position: -webkit-sticky; top: 0; }
August 9, 2020 at 10:11 am #1394244DavidStaffCustomer SupportHi there,
try this CSS:
#mobile-header .menu-toggle { order: -1; } #mobile-header .site-logo.mobile-header-logo { margin-left: auto; } .slideout-navigation.do-overlay .slideout-exit { position: fixed !important; } .slideout-navigation button.slideout-exit:not(.has-svg-icon):after { content: "Close"; margin: 0 3px 5px 0; } .slideout-navigation button.slideout-exit { display: flex; align-items: center; flex-direction: row-reverse; }
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.