Archived topic
iPad resolution + search font
9 replies · Started by Søren on November 21, 2018
Hello two questions here:
1) Are there anyway to set the resolution width for the mobile menu to set in? When I do 768px width on my desktop I can see the menu, but not when I'm on my ipad - it goes into mobile menu. I would like the four menu sections to stay in portrait mode.
2) When I'm searching I can't really see whats written - how do I make it more visible?
https://www.dropbox.com/s/erglxjsmkfkyc4u/Screenshot%202018-11-21%2013.24.23.png?dl=0
Hi there,
1. To show the mobile header at a smaller width, you can do something like this: https://generatepress.com/forums/topic/enable-mobile-header-only-for-mobile-and-no-tablet/#post-514448
2. You can make it so the navigation search has no transparency like this:
.navigation-search input {
opacity: 1;
}Let me know if you need more info :)
1) I'm still having trouble - I need the breakpoint for the mobile to kick in below width 768px. I don't want it at 768px because I have few menu points that can easily fit on the iPad's portrait mode. Tried this but I need the opposite so to speak.
2) I fixed it by changing the color from grey to black:
.navigation-search input[type="search"]:focus {
color: #000000;
font-weight: 600;
}Hi there did you try the code Tom linked to? Specifically this code from George:
Yes - it didn't look right for sure. I want to keep the desktop menu down to 750px for example.
In that case, doing this should work:
@media( min-width: 750px ) {
.site-header,
#site-navigation,
#sticky-navigation {
display: block !important;
opacity: 1;
}
#mobile-header {
display: none !important;
opacity: 0;
width: 100% !important;
}
}Still doesn't work. I've tested on my Chrome window resizer and on my iPad.
The menu, search and shop icon appears - I mean it doesn't go into upper menu layout.
Is something to do with my GP settings?
I've set it to 700px: https://landcph.com/ and it still still resizes below 768px..
Ah I think I see the issue.
Add this as well:
@media (min-width: 700px) {
.main-navigation button.menu-toggle,
.main-navigation .mobile-bar-items {
display: none;
}
.main-navigation ul, .gen-sidebar-nav {
display: block;
}
#site-navigation {
float: right;
clear: none;
}
#masthead {
text-align: left;
}
}Almost there - the sticky menu icon is still showing - can I remove that?
What are the reason that I need two code parts? Can i simplify it somehow? I just want it to kick in when the width goes below iPad portrait mode 767px.
Hmm, I'm not seeing that - can you try clearing your browser cache?
It is a bit over-complicated, isn't it. In GP 2.3, I want to add breakpoint options into the Customizer so you can just choose the widths and let GP do the work.
