Add Search bar to Menu (carbon theme)
-
Hi,
I’d like to add a search bar to my header menu, is there a way to do this is CSS?
The blog in question is: <IveGotCake
The blog I need help with is: (visible only to logged in users)
-
Hi there, Carbon does not have a header search feature. In some themes, we can move a text widget up into the header area (not in the menu itself), but on responsive designed themes such as Carbon, this typically doesn’t work too well.
Currently you have hidden the sidebar with CSS and also added a 22% right margin. Have you thought about removing the CSS you have now and adding the search widget to the main sidebar? That would give you about the same spacing on the right as you have now. We could also hide that sidebar on single post pages to get your featured images full width as you inquired about in your other thread. Let me know your thoughts.
By the way, your food images are making me hungry. :)
-
Hi @thesacredpath!
I actually learned how to do the margin spacing thing from reading up on questions you previously answered for other users on this forum :)
Yes I think you’re onto something.
Just to be clear, there’s no way I can have a search feature in the footer?I’m trying to keep the overall display as clean as possible and frequently sidebars clutter things up so I guess I just want to exhaust any other options I have before I go back to the side bar.
Meanwhile I’d love to try hiding my sidebar on individual posts such that my images can expand full width (that part was really stressing me out for a while there).
Thank you again for taking the time to respond!
-
Just to be clear, there’s no way I can have a search feature in the footer?
To do that, you would have to keep the sidebar and put the widget in the sidebar and the use CSS to move it into the footer. Since you don’t want a sidebar, we can’t do that.
Meanwhile I’d love to try hiding my sidebar on individual posts such that my images can expand full width (that part was really stressing me out for a while there).
What we can do is to remove your right margin from the single post pages by preceding the #content selector with the “single” CSS class from the opening body HTML tags present on single post pages like this.
.single #content { margin-right: 0 !important; } -
Good Morning,
I tried the CSS code you suggested and I don’t see a difference.
It expands the home page back to its default full width (I think) and I don’t really see a difference in the posts.
They just look like they did before I added the right margin.It’s probably me. I’m probably misunderstanding something you saying.
Is there a way I can keep the home page and posts with the previous margin it had (22%) but instead have the pictures in the posts display in full width? Under the code you gave me, it looks like there’s still room for the the pictures to expand.
As for the search feature. I think I will try your suggestion earlier about putting back the default side bar and just having ‘search’ display only on the home page.
Provided we can still hide ‘search’ from the individual posts themselves.Thank you in advance!
-
The code I gave is for single post pages only. I tried adding to your custom CSS and see that it did indeed not work while it worked when using my browser web inspector. I also see that that change does not appear to work in the preview in the Customizer. It does however work if I add it to your customizer and then save and visit one of your posts while on your site. Add it again at the bottom below all other CSS and save and then visit your site and go to one of your posts. The code I gave only affects the single post pages because I’m using the “single” CSS class from the opening body HTML tag on single post pages.
-
You can certainly hide the sidebar on single post pages. This would be the CSS for that.
.single #tertiary { display: none; } -
Ok so I followed your instructions such that my CSS edits (saved and published, then new window opened and viewed in a separate tab) look like this;
.single #content {
margin-right: 0% !important;
}.single #tertiary {
display: none;
}Yet the (now added) sidebar still exists in the individual posts themselves. For some reason, it isn’t hidden.
I also notice that the pictures haven’t widened full width either. Probably the present sidebar is affecting that?
I wish there was a way to add screenshots to this.For the record, the above code is the only CSS code I have in my editor.
:( :( :( -
In the CSS editor, there’s this thing below called, ‘Media Width’…..does that have any influence over making my images bigger?
I did try playing around with it but nothing happened. -
This CSS rule, which you have for your right margin
#content { margin-right: 15% !important; }is also applying to the single post pages. Add the following to override that on the single post pages.
.single #content { margin-right: 0 !important; }On the sidebar hiding on single post pages, that was my bad. The CSS selector on single post pages is different, so change the .single #tertiary rule to the following instead.
.single .widget-area { display: none; } -
In this case, the media width section isn’t causing any issues.
Let me know what you think of the look of the individual post pages. It sort of bothers me to have the content aligned to the left with the white space to the right.
-
-
(sorry, that sent too soon, my bad)
I’ve done exactly what you told me to do with mixed results:
Success on hiding the search feature on individual pages but maintaining it on the home page (which gives it that boundary that I want) – THANK YOUUUUUU!!Still however, unable to expand my media with any further past the text width in single posts.
Please please please tell me we can do something about it!
Can that ‘media width’ section in the CSS editor do anything? I wasn’t certain in your last response whether we can use that to expand the images any further.
Essentially I want the images in the single posts to be as wide as the homepage (with the search bar present) so that they are really emphasized.There seems to be room to do this, I’m just missing the appropriate code.
-
Still however, unable to expand my media with any further past the text width in single posts.
Are you talking about in the post content area? If so, add the following to your custom CSS and adjust the 800px max-width value as desired. If you wish it to be as wide as possible, then instead of a pixel value with 100%.
body.single .content-area { max-width: 800px; } -
Hey there!
Yes, I am/was referring to the images in the post content area, ha.
What you suggested work, thank you!However, when I implement it, it adjusts the entire post content such that the text, which used to be either below or above the pictures, is now on the side of them.
Is the a CSS code that can expand just the images, not the entire post content? -
For the record, I’ve changed the code back to what is was until I can find a solution for the font issue.
Just a heads up in case you go back to look at the CSS later :) -
-
ahhh haaaa!!
Got it.If I write my posts such that my div lines are only around my images, I think that will solve my problem. I’ll try that in my next post.
Thank you so very much for all your help, I really do appreciate it
<3 -
One more quick, a bit non-related, question:
I think you said earlier that it wasn’t possible to add the search bar to the header, but I’m curious if that’s just for the search feature or for all the widgets.
As in – can I add other widget.s to my header or to my footer?I know in some themes you can do it in CSS, I’m wondering if that applies to my theme as well
-
Sorry me again –
So you said we can’t just widen the images because the text is also part of the same div.
I understand that but then what would i need to do to get the words back under the pictures, instead of on the side of the pictures?
Is there a paragraph break or something I need to put in?I’m a little confused why after an image, the text is on the side of the image, instead of but the text above the image is fine and normal (everything is still being under the same div).
Does my question make sense?
- The topic ‘Add Search bar to Menu (carbon theme)’ is closed to new replies.
WordPress.com Forums 