Changing location of search on mobile
-
Can someone help me move the search field to somewhere on the top (hidden or visible) on the Wilson theme? Right now it is all the way on the bottom.
Also, what are my options for moving the hamburger menu icon around to different places on the top?
It would be nice to have the hamburger menu icon and the search form on the same row.
Thanks
The blog I need help with is: (visible only to logged in users)
-
Hi there,
In order to move elements around, you probably need to edit a page template file or create a new one. On WordPress.com, you do not have access to the PHP files so that won’t be possible. You can only edit PHP files on a self-hosted WordPress site.
-
I was thinking….
1. If I were to create a sticky post (easy enough)
2. hide title of the sticky post (need help with)
3. then how could I add the class “search-form” to the post (didn’t work…need help with)<form role=”search” method=”get” class=”search-form” action=”https://ewtn.blog/”>
<input type=”submit” class=”search-submit” value=”Search”>
<span class=”genericon genericon-search”></span>
</form>That way, then anyone who views this blog’s theme in mobile version wouldn’t have to scroll all the way down the page.
Just an idea.
-
Hi @411holy, you can’t use the form html code on the Premium plan, only on the Business Plan.
I’ve tried some CSS to move the search to the top to the left of the hamburger menu on smaller screens, but since we have to use position: absolute; to do that, it loses any relationship to the rest of the elements on the web page, and with the header area not being a fixed height, it it would require quite a few different media queries to adjust the position of the search, and even then it would not be aligned well on all mobile devices.
You can try the following, which moved it to the very top right above all the site title/tagline stuff and see what you think. With position: absolute; there really isn’t a solid way to center something, so it would have to be either to the right or left.
@media screen and (max-width: 789px) { #search-3 { position: absolute; top: 20px; right: 0; } .site-branding { padding-top: 90px; } } -
If the tweeks above work, what I would like to do next (if possible) is to HIDE the following on the mobile version, but keep them visible on the desktop version.
1. .site-title
2. .site-descriptionNote: I want the .site-logo to remain visible on both but move it up a little.
While making these changes, I would also like to decrease height (collapse?) the div.site-branding area on the mobile such that the search form and hamburger menu icon would be right below the logo.
Can you please help me with this?
-
The adjustments you have made seem to work just fine, so I think you are good to go on that.
We can certainly hide the title and tagline, but the title/tagline shifts from the left to the top, centered, at 788px in width (basically tablet size range). The following removes the title/tagline at 788 and narrower. If you want to keep them for tablets, but only affect phones, then change the 788px value in the @media line to 600px.
@media screen and (max-width: 788px) { .site-description, .site-title { display: none; } }With the above change, you will need to adjust the 270px top value in the previous media query to perhaps 190px.
-
Sorry, use the following instead which includes narrowing the height of site-branding and then set the top in the previous to 140px instead of 270px.
@media screen and (max-width: 788px) { .site-description, .site-title { display: none; } .site-branding { padding-top: 30px; padding-bottom: 30px; } } -
Thanks! again, please look at my tweaks. Not sure I like the way the logo looks on the tablet size, though.
Here is what I ended up using:
@media screen and (max-width: 788px) { #search-3 { position: absolute; top: 95px; margin-left: 6%; } } @media screen and (max-width: 788px) { .site-description, .site-title { display: none; } .site-branding { padding-top: 15px; padding-bottom: 5px; } } .menu-toggle .genericon { font-size: 24px; font-size: 3.0rem; } .menu-toggle { margin-top:-21px; } -
Addendum to above post: Is there a way to align left logo? That might help with tablet size?
-
Yes, you can do that. In the code you have, for .site-branding, add the following.
text-align: left; -
awesome, I also added width:75%; to #search-3 to fill out more space on the bottom half of header w/ hamburger menu.
I guess you looked over the code above, and my other tweaks are okay?
I don’t understand the purpose of the font-size:24 px; when I make changes nothing happens, use 2rem instead. Why have the font-size there?
-
The menu toggle button is symbol from the Genericon icon font, so it’s size is controlled by a font size. I’m not sure why the original CSS for the size had both the px and rem sizes. I sometimes see that in themes. Since the rem size declaration is after the px size declaration, it takes precedence, which is why your px value did not change the size of the icon. In this case, using the rem is the best solution.
Things are looking good on your site, and no, I do, and did not see, any issues with the adjustments you made to the CSS. It’s all looking good.
-
“Since the rem size declaration is after the px size declaration, it takes precedence”
LOL So obvious, it never occurred to me!!!!!
Thanks for your help. I couldn’t do this all by myself.
-
I reopened this thread because I noticed that on iPhone 7 screen size the logo banner does not stretch all the way across the screen like it does on the 6 se. Is there a way to tweak this?
-
-
That worked for the logo, but the search widget that I positioned stays where it was, and doesn’t move, blocking the logo.
oh boy! frustration!!!!!!! I tried to fix it by tweaking code below, but I think my min and max sizes are off, and the search box is still not cooperating.
@media screen and (max-width: 600px) { #search-3 { position: absolute; top: 115px; margin-left: 6%; width: 75%; } } @media screen and (min-width: 601px; max-width: 788px) { #search-3 { position: absolute; top: 215px; margin-left: 6%; width: 75%; } } @media screen and (max-width: 600px) { .site-description, .site-title { display: none; } .site-branding { padding-top: 15px; padding-bottom: 5px; text-align: left; margin-bottom: -70px; } } @media screen and (min-width: 601px; max-width: 788px) { .site-description, .site-title { display: none; } .site-branding { padding-top: 15px; padding-bottom: 5px; text-align: left; margin-bottom: -70px; } } -
I hope you weren’t working on the above. I decided to take a few steps back. I took out the img branding 100% and went back to the more simpler version of the above code.
@media screen and (max-width: 600px) {
#comment-form-guest {
max-width: 100%;
}
}@media screen and (max-width: 788px) {
#search-3 {
position: absolute;
top: 115px;
margin-left: 5%;
width: 75%;
}
}@media screen and (max-width: 788px) {
.site-description, .site-title {
display: none;
}.site-branding {
padding-top: 15px;
padding-bottom: 5px;
text-align: left;
}
}.menu-toggle .genericon {
font-size: 24px;
font-size: 2rem;
}.menu-toggle {
margin-top: -5px;
padding: 0;
}This is the code I think I might want to start with, don’t you agree?
-
I added the following to @media screen and (max-width: 600px)
.hentry:first-child { margin-top: 15px; }I didn’t have to do this initially, but when I moved the #rss-9 widget to the top of the page in the desktop version, I had to create more space on top of the page and so I tweaked this selector. But that changed the layout on the mobile. Hence the need for adding this to the @media screen.
-
Okay, this thread is turning into a mess. Just read the last comment above, and maybe I should close this thread and start a new one with specific objectives that need fixing??
- The topic ‘Changing location of search on mobile’ is closed to new replies.
WordPress.com Forums 