Responsive plug-in

There won’t be a plugin, so I recommend linking your website so that we can give CSS help.

You mean that no plug-in will be responsive?

The website is here https://www.pinkpiranhaproperty.com

But the custom CSS I have added is limited as you will see.

Mike

I meant that there aren’t going to be plugins to resolve this problem in the way that you might want it. Some plugins throw away your theme on mobile and use their own responsive design, but that’s probably not what you want.

So I noticed that your sidebar is really at the top of the page, and it has been moved in its current position using absolute positioning. It’s going to be very tricky to work like that in a responsive design. It would be much better if the sidebar could be moved in the HTML so that it is beside the content.

I would expect it to be beside this element:

<div id="main" ...>

I have not moved the sidebar. The top pink band with the phone number/email etc is the secondary menu of my theme.

I have only moved the main navigation menu a little bit (with the Landlords, Renting bits).

Here’s what I am really struggling with. Why does the search bar code below work responsively but if I cut and paste it to my site, it does not act work responsively??

https://codepen.io/capynet/pen/vJBnL

Mike

Is this what we’re looking at: https://snag.gy/mq3Gl.jpg

yes that is the search bar …

As you can see, it does not act responsively at all …

How did this appear on the page, is it part of your theme or a plugin?

this is a search bar that is part of my plug-in (wp-property) … I have added the search form custom to the header via a shortcode from my child theme functions.php file..

I’ve triple checked and I still think it’s an issue to do with the absolute positioning applied to this searchbar. Maybe it would be better to consult with your theme’s vendors if you’re sure that you that you didn’t change the position of this. This would suggest it’s a bug in the theme.

I’m a little confused .. I did change the position of this – I applied the absolute positioning of this I said (code below). Should I change the absolute position to something else?

functions.php file of child theme:

// Apply Custom Search bar in header //
add_action( ‘avada_header’, ‘my_custom_search’ );
function my_custom_search() {
echo do_shortcode(‘[property_search]’);
}

custom.css:

/* Search functionality – Main search bar elements */
.wpp_shortcode_search {
/* Positioning */
position: absolute;
width: 40%;
bottom: -10px;
left: 436px;
}

I’m still a bit confused as to my previous question:

” Here’s what I am really struggling with. Why does the search bar code below work responsively but if I cut and paste it to my site, it does not act work responsively??

https://codepen.io/capynet/pen/vJBnL “

Mike

If you apply the absolute positioning to the Codepen example then it doesn’t become responsive. That’s why your Codepen example works, it is out of context.

I’ve applied the absolute positioning to the Codepen example here to demonstrate the issue: https://codepen.io/anon/pen/vLRgGj

So I would recommend not using absolute positioning in this case, as it will cause a lot of unnecessary headache. What would be much better would be to move the searchbar in the HTML so that it sits next to the main content.

I see what you mean …

That’s absolutely fine, I will remove the absolute positioning no problem..

I’m not sure I understand why moving it to HTML is a better idea but I will take your word for it – but it then might get a bit more complex for me .. I guess I do that in the functions.php file aswell? …

I wonder if you could advise on what code is required?

Mike

Moving the HTML will allow you to use more friendlier CSS for a responsive design.

For example, if you move the searchbar underneath the HTML for the main menu then it sit naturally in the page and you won’t have to force it into position:

<div class="fusion-secondary-main-menu"> [...] </div>
<div class="wpp_shortcode_search"> [...] </div>

Unfortunately we can’t help beyond CSS recommendations because this is a commercial theme.

ok .. so if I embed the plug-in search bar inside the HTML for the header main navigation it will naturally/automatically be responsive like the rest of the header/theme?? .. (or is there more required and that is wishful thinking?)

I understand the support limitations but are saying this is straightforward enough for a non-expert like me?