Search Box in the right sidebar of Post is being cut off along the top of the search box.
This happened after adding some CSS provided by Support for a change to the landmark header on Pages.
That thread was “Header on Pages”.
Hi Justin,
Thanks for writing a new thread, it was not actually cut off, it just needed a top margin. I did go ahead and added this to Theme Options > CSS
.x-sidebar {
margin-top:35px;
}
Please clear your browser’s cache if this did not take effect on your end.
Cheers!
Thank-you. It worked.
Just a quick question about the previous CSS code that was for the Pages. Archive and Search Pages did not seem to be changed by the CSS coding despite the Pages like Privacy and Recommended Pages taking the changes.
That is because Privacy and Recommended Gear are actual pages, it has the class page in the body tag, that is what the .page on Lely’s CSS code is for.
e.g.
.page header.x-header-landmark.x-container.max.width {
background-color: #fff;
max-width: none;
width: 100%;
}
.page h1.h-landmark.entry-title {
max-width: 1500px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
Search and archive page on the other hand has no .page class that is why those are not affected with CSS code given.
Search has .search class, and the Archive has .archive class on the body tag.
You can find the proper CSS code selector/class using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial
Hope this shed some lights,
Cheers!
Cool, thank you for the explaination, makes sense. So, to make search and archive appear the same as page all I would do is use the same coding but use .search and .archive as opposed to .page? Seems easy enough.
Ok, so I have tried the following for the search results page and everything looks great, except the text “Search Results” shifts to the far left. No matter what I do, it does not shift right. I suspect that I am either doing something incorrectly or have omitted a step. The following is the .css I am tried:
.search header.x-header-landmark.x-container.max.width {
background-color: #fff;
max-width: none;
width: 100%;
}
.search h1.h-landmark.entry-title {
max-width: 1500px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
Hello Justin,
Do you want to display it like this?
Please make use of this code instead:
.search header.x-header-landmark.x-container.max.width {
background-color: #fff;
max-width: none;
width: 100%;
}
.search h1.h-landmark {
max-width: 1500px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
We would love to know if this has worked for you. Thank you.
Exactly. Will this also apply to archived posts with the exception that it would be .archive and not .search?
Hi Justin,
Yes, it will as long as you add proper selector, example
.search header.x-header-landmark.x-container.max.width, .archive header.x-header-landmark.x-container.max.width {
Cheers!
Great, thanks.
Yes, it worked just fine! I did have a question though. On the main page there seems to be no space between the top of the content and the logo. Is there any simple way to do this?
Hi Justin,
Yes, you can increase the spacing. Please go to Theme Options > Header > NAVBAR HEIGHT and set it to about 190px.
Hope this helps 
Ok, but this will change for all pages/post correct. It only appears to be an issue on the main page. Other pages seem fine
I changed the Navbar Height to 190px. However this moves the hover over form the menu to the top edge of the sidebar…
Hello Justin,
If you want to display like this in your homepage:
You can make use of this code instead:
.home .masthead {
padding-bottom: 35px;
background-color: #fff;
}
Hope this helps. Kindly let us know.
You guys rock! That worked.
Thanks for letting us know that it has worked for you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.