- This topic has 19 replies, 4 voices, and was last updated 3 years, 7 months ago by Leo.
-
AuthorPosts
-
September 20, 2020 at 11:51 pm #1451686Anil
Hi
Off canvas panel icon remains invisible from 501 to 768px screen size…
Please advise…
September 21, 2020 at 2:11 am #1451836DavidStaffCustomer SupportHi there,
instead of setting the Off Canvas to Display on Mobile and Destkop. Set it to Mobile only.
Then in Customizer > Layout > Primary Navigation – increase the Mobile Menu Breakpoint to a really hight value – eg. enter 6000px.September 21, 2020 at 4:12 am #1451984AnilDavid, it works, but navigation-branding is loosing left margin…. logo is sticked to left margin of screen….
September 21, 2020 at 4:23 am #1451993DavidStaffCustomer SupportTry this CSS to add back a little padding when the screen is 1200px wide or less:
@media(max-width: 1200px) { .main-navigation.has-branding .inside-navigation.grid-container { padding: 0 10px !important; } }
September 21, 2020 at 4:44 am #1452015AnilAbove code not working.
I tried below one, is this correct….
.main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding { margin-left: 20px; }
September 21, 2020 at 7:30 am #1452252DavidStaffCustomer SupportWeird – that CSS i provided should work.
Does yours? If so it looks fine to meSeptember 21, 2020 at 7:38 am #1452275AnilWeird – that CSS i provided should work.
No, it was not working.
I had to have couple of css for managing it…
I believe, you need to update navigation-branding-flex.css…
September 21, 2020 at 2:12 pm #1452948TomLead DeveloperLead DeveloperTry the latest 1.12.0-beta.2 version 🙂
September 22, 2020 at 1:24 am #1453407AnilDear Tom, I removed the added css, and this beta.2 resolves the issue.
One more issue, I would like to highlight .navigation-branding margin-left which is hard-coded 10px, it is not coming nice when you apply padding of 20px in content.
I had to use following css to overwrite
.navigation-branding { margin-left: 20px; }
Please check…
September 22, 2020 at 9:35 am #1454136TomLead DeveloperLead DeveloperHave you tried changing the Container alignment to “Text” in Customize > Layout > Container?
September 23, 2020 at 11:48 am #1455921AnilHi Tom
Using
GPP 1.12 rc1
GP 3 beta 2Removed inserted css in simple css.
Please check left alignment of logo is NEITHER aligned with box NOR aligned with text in both ways as per customiser – Container alignment to “Text” OR “Box”…..
September 23, 2020 at 12:00 pm #1455933LeoStaffCustomer SupportI think the issue here is that you’ve changed the mobile navigation breakpoint to 6000px so you are actually seeing the mobile header layout on desktop.
The
margin-left: 10px
CSS is added to the mobile navigation branding so the logo doesn’t position right against the edge of the mobile screen.So in this case we can try some CSS like this to tweak it:
@media (min-width: 1220px) { .navigation-branding { margin-left: 0 !important; } }
Let me know if this helps 🙂
September 23, 2020 at 12:16 pm #1455958AnilThe margin-left: 10px CSS is added to the mobile navigation branding so the logo doesn’t position right against the edge of the mobile screen.
I am saying it should not be hard-coded…
September 23, 2020 at 12:32 pm #1455975LeoStaffCustomer SupportHmm I would say that most users don’t want their logos to sit right against the edge of the screen on mobile.
So if we don’t add that CSS in, we would end up having to provide that CSS to all the users who want that.
Let me know if this makes sense 🙂
September 23, 2020 at 12:39 pm #1455979Anilit should be based on some logic to have value from customiser – padding / user input / or something…. think of it…
-
AuthorPosts
- You must be logged in to reply to this topic.