- This topic has 18 replies, 2 voices, and was last updated 1 year, 7 months ago by David.
-
AuthorPosts
-
September 9, 2022 at 9:00 am #2338266eran
How can I make the site logo + tagline and the menu at the same line only in the mobile?
I can do it with navigation as header but it affect my desktop as wellPlus, right now the menu is before my header but in mobile the menu is above my header. why it changes?
September 10, 2022 at 3:41 am #2338754DavidStaffCustomer SupportHi there,
Remove this CSS:
/* make the logo on top keft side */ @media (max-width: 768px) { body { display: flex; flex-direction: column; } nav#site-navigation { order: -1; } .main-navigation .menu-toggle { text-align: left; } }
And add this CSS:
@media(max-width: 768px) { .site-header .site-branding-container { flex-direction: unset; } .site-header .site-branding-container .site-logo { margin-right: 20px; } .main-navigation .inside-navigation { position: static; } .main-navigation .menu-toggle { position: absolute; top: 20px; left: 10px; z-index: 1000; } }
September 10, 2022 at 3:50 am #2338759eranThe logo is on the menu in mobile
September 10, 2022 at 6:34 am #2338870DavidStaffCustomer SupportAdd this CSS to adjust the size and position on really small screens:
@media(max-width: 500px) { .site-header .site-branding-container .site-logo { margin-right: 10px !important; } .site-header .site-branding-container .site-logo img { max-width: 40px; } .site-header .site-branding-container .main-title { font-size: 13px; } .main-navigation .menu-toggle { top: 5px !important; } }
September 10, 2022 at 7:12 am #2338886eranit worked.
now the sticky navigation doesn’t work.September 10, 2022 at 7:19 am #2338897DavidStaffCustomer SupportAre you able to create a logo that container the logo image and the text ?
As it would save a lot of CSS as you can just add it as the Mobile Header Logo ?September 10, 2022 at 8:09 am #2339055erando you know what dimensions I need?
September 11, 2022 at 9:04 am #2339739eranI need to tell the designer the dimensions.
do you know what i need?September 11, 2022 at 9:45 am #2339764DavidStaffCustomer Supporti would suggest no larger than 60px x 240px
September 11, 2022 at 10:04 am #2339781eranthe width should be smaller then the height?
September 11, 2022 at 12:14 pm #2339879DavidStaffCustomer SupportNo sorry i should have said 60px height, 240px wide.
September 15, 2022 at 12:36 pm #2344144eranOk I have the logo.
now to use header as navigation and add the new logo?September 16, 2022 at 3:15 am #2344618DavidStaffCustomer SupportLeave your current header as is.
But in Customizer > Layout > Header, enable the Mobile Header, and there you will be given a field to add your mobile header logo. Add your new logo to that.Let me know once thats done.
September 16, 2022 at 3:52 am #2344648eranDone.
look like the logo is too small.September 16, 2022 at 5:09 am #2344713 -
AuthorPosts
- You must be logged in to reply to this topic.