I am trying to get Algolia Search to work on Genesis child theme.
I have downloaded the Beta WordPress plugin from https://github.com/algolia/algoliasearch-wordpress. While I can see that network wise, everything works well, the Search Results do not show up in the AJAX drop down just below the Search Box.
Another interesting observation is that while the main Search Bar on the front end of the website does not show any results, the small Search bar within the Admin menu on the top right corner of the page does show the results. That is because the Algolia code attaches to any DOM element with [name="s"].
However, I have checked using the Inspect tools that the Main Search bar is also surrounded by Algolia <span class>. As I type into the Main Search Bar, I can see the DOM changing dynamically to add the <div> tags containing the search results. So I know that the network piece is working.
Any ideas or suggestions on what to try?
Other things I have tried:
I placed the Search bar in the footer as well (thinking that maybe the opacity might be a problem in the header). Same result
I have tested the same plugin on a similar site (with identical plugins) but with a non-Genesis theme. It works fine. That is why I have concluded that this might be related to Genesis.
As I stated above, when I type in the Search bar in the top right corner within the WordPress Admin menu, it does work.
For anyone else that is trying to get this to work on genesis, here is the CSS change:
The issue is that the parent .search-form is configured with a weird "overflow: hidden". To fix your theme, just add the following CSS rule:
.search-form {
overflow: visible !important;
}
A new version of the plugin was released recently, 0.2.6 at the time of writing this.
In the new version, the dropdown is no longer injected in the same container as the search input container but is attached to the document instead.
You should no longer need to tweak the CSS like it is shared in your own answer.
You can download the latest version from: https://community.algolia.com/wordpress
Best
Related
I'm building a website for a client in Wordpress using the Avada Theme and for some reason, my nav bar anchor links are not working at all on mobile (when I click on one of the items in the dropdown either using Firefox's responsive view or my actual phone, it just goes to the top of that page, not to the section where the ID is), even though it works fine on desktop.
This is the website in question: http://harcourt.epicdev.co.za/
It's the items under What We Offer that I'm trying to get to work, and unfortunately the Avada forums are no help whatsoever.
Thanks in advance!
in avada you need to add an element anchor to the position where it should scroll to and give it a name.
Avada have this ability so you can adjust the exact position of an anchor accordingly to your needs. simply add the anchor element into your page wherever it should scroll to on click in menu, and its done. works in every browser. even IE.
i use the same procedure in my crypto lexikon.
I'm a developer but I don't know wordpress well and I have just inherited a wordpress site. There's a missing logo image at the top left next to the menu bar:
I have the image file but I cannot find where that logo/image is configured inside WP. I have gone into the Menus section many times -- I find the menu items but I cannot find where that image is configured. So I need to know where/how to configure that, and also how to make the image size "fixed". By default, when the image was there (before I accidentally deleted it somehow), it stretches/expands when the user scrolls down.
My client is using the "Divi Builder" template, and this template uses some kind of custom layout/template for managing and editing the page.
The Divi theme is being used and here's what it looks like inside theme customization:
So in summary:
Where/how can I find that image setup so I can fix the src to point to the correct image that I have?
How can I prevent its default behavior of expanding while scrolling down?
Thanks!
For logo settings:
Goto dashboard->appearence->divi theme option->Generl settings.
other settings
Support Docs-> Read divi theme documention
The Divi theme is a commercial theme and don't expect people on SO to have access to it. It's best to go to https://www.elegantthemes.com/forum/ for support.
"Where/how can I find that image setup so I can fix the src to point to
the correct image that I have?"
The logo is uploaded and the URL set in theme options, not in the menu options.
"How can I prevent its default behavior of expanding while scrolling
down?"
This is a completely separate question and is a feature of the theme. Ask theme support how to disable it. Or isolate the Javascript and other code and put it in a Fiddle so people can see how it works.
I just purchased and installed UberMenu plugin version v3.2.1.1, followed the setup exactly the way they described, and I'm able to see the Ubermenu instance in my front page, as it should be.
However, I can't access the customization area of the menu, and therefore I can't tweak it my own way.
When I go to Appearance -> Menus and click on the Uber button on any menu item, all I get is an empty options popup, just like the image below. None of the tabs present any content, it's just like the plugin scripts weren't being loaded.
However I see that blue popup in the lower right end of the screen saying it was being loaded correctly, and it's gone properly when it ends the job.
What can I do to enable/load correctly the configuration options for this plugin?
Thanks!
There are generally 2 possibilities that can make this happen:
A PHP error occurs (for example, a memory limit exception), preventing the page from loading the content critical to the menu item settings panel. You can check if that's the case by viewing your Menus Panel page source and seeing if you have a closing HTML tag.
or
The theme alters the admin menu structure via a custom Walker, resulting in the plugin not being able to find the appropriate data within the admin menu items to generate the settings panel. This is not very common, but can happen with themes that offer their own custom menu item settings within the Appearance > Menus Panel, as they alter the standard item markup to suit their needs.
If you need assistance, just Submit a Support Ticket over at sevenspark.com and we'll help you get it sorted out :)
Have a great weekend!
Ok, I know that there are several other questions on SO regarding this topic. By now, I have probably read all of them. I have been researching this for a little over two hours now and I am coming to the end of the road (about to give up!)... So, here I am on SO finally asking the question to involve other sharp minds.
I am helping build this Wordpress site: greatman.us. And, the Posts page is located on a page called "Blog." The "active" menu item is highlighting properly on PAGES, but when you go to a POST, the "Blog" menu item is not longer highlighted (i.e. NOTHING is highlighted in the header menu).
There is no way in Wordpress - as far as I'm aware - to create a "parent" for a blog post. This option is only available for Pages. I need to be able to have the "Blog" menu item stay highlighted when I am viewing a BLOG POST.
For a general example:
mywebsite.com/blog/ <--- menu item "Blog" is highlighted
mywebsite.com/blog/post223 <--- menu item "Blog" is no longer highlighted
I am proficient with CSS and HTML, but not with PHP. So, if this is a PHP fix, please dumb your answer down as much as possible.
I have read tons of other articles about this online and it seems to be a common issue, with most people not knowing how to code with PHP.
I am using a custom theme, called Divi. And it is missing some of the CSS elements that other forums and sites I have read said that the style.css should have. This is another reason I am coming to a dead end. Please help!
By the way, one WORKAROUND I discovered is to add POSTS as sub-menu items to the "Blog" page that you made in the Wordpress Menus area (in the admin back-end). Then, use "display:none" is CSS to remove the submenu from being displayed to the public. This causes two main problems, though: 1) You can never have any other sub-menu items, because they won't be displayed. 2) You have to manually add every single blog post to the menu as a sub-menu item. This will eventually make your menu super long assuming you are a regular blogger. It is also a hassle.
Within your CSS, you will also need to add .current-page-ancestor with the same attribtues as your current menu item.
Something similar to below:
.current_page_item, .current-page-ancestor {
// Some attributes
}
This is guessing that you have use wp_nav_menu() though. If not then I'll need to see what code you have used to generate the menus.
FOLLOWING ISSUE BEING RESOLVED NOW:
I am working for the first time on wordpress currently i am facing just a small issue of adding a top bar which will come from the following code. In simple html its working perfectly fine but its creating some error when i put this code in the index file on the the top of the index.php page. All i want to do is that the top bar should appear generically on all the other pages being used in the theme and appear perfectly fine kindly let me know which one is the efficient place to put the following piece of code.
Note: I am using by default theme by wordpress
If your intent is to display options for the editors, you should look into the WordPress toolbar:
http://wp.smashingmagazine.com/2012/03/01/inside-the-wordpress-toolbar/
If you want to edit the header for all users. The theme will like have a header.php which you can edit. The recommended way to do this would be to make your changes in a child theme.