If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #28442


    Here is my website : http://www.labasesecrete.fr/blog

    I want to retool my main menu’s search bar in several ways, and all my css changes have been fruitless so far.

    First, what line must I change so that the search bar doesn’t extend to my social media icons when we hover it? As you can see on my website, when you put your mouse on the search bar, it extends through the social media icons.

    I would also like to add a white (or another color) background to the search bar, and use a rounded outline (much like iTunes’ search bar), is there a way to do so?


    Hi Drucci,

    We are getting near a point that is a beyond what we can really do via support. Customization that starts to effect other elements which require more customization is much more the area of a freelance developer who can customize everything for you.

    In this case, changes you’ve already made are causing things to not work like you’d expect or now want different. In your custom css you have this which is why the background isn’t already white:

    .search_site #searchform div {
    border: none;
    background: #D6DEE9;
    color: #44586d;

    For the width, you can use:

    .search_site.addapted {
    max-width: 240px !important;

    But it max width isn’t support in IE8 so keep that in mind.




    Thanks, its width is perfect now.

    I understand that I ask too much of you and your colleagues, thanks again for the help.

    I can’t affort a freelance developer : that’s why I’m going to ask for your help one last time, hoping you will be able to correct it. Otherwise I will just skip this thing and focus on finally working on my website’s content!

    So, here it is : I’ve enlarged the div_container for all pages thanks to some pieces of codes taken here, but it causes a small problem : the latest posts are not displayed properly. When I want to display only one post, you can see the following post already eating some width space dedicated to the first post : http://www.labasesecrete.fr/blog/

    I’ve properly customised the display settings but it doesn’t solve my issue.


    I’m not sure what has been modified from there but the slideshow values for the blog display aren’t set correctly. I would need at least some frame of reference for what has already been modified for the blog slider.


    Here are my custom.css lines regarding the slideshow :

    .home .template-blog.content {

    width: 920px;


    .home .post-entry.half_post {

    width: 400px;


    .content {

    margin: 0 auto;

    float: none;


    .template-blog.content {

    width: 920px;


    .post-entry.half_post {

    width: 400px;



    width: 1050px;

    margin: 0 auto;



    Hopefully it can help you?


    I’m not sure about the width issue but you need to update to Shoutbox 1.5 to update the javascript for all of the slideshow functionality if you want to use WordPress 3.6+.


    I just updated to Shoutbox 1.5 but it doesn’t fix the issue.



    I’m not sure what you’re trying to do. Can you post a screenshot? A mockup of the website that you want to do?

    Please add this on your custom.css or Quick CSS to hide the second slider on the featured slider.

    #top .featured_post_slider {
    padding: 0;
    width: 620px;




    Thanks for the code, it did what I want to do : display only one post.

    Yet, the only remaining matter now is that the slider isn’t large enough overral : is there a way to enlarge it (to get the same size as my other pages) or to center it on the frontpage?


    You can center it with:

    #top .featured_post_slider {
    margin: 0 auto;


    Thanks a lot, I don’t have any more queries now !

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Main menu's search bar customization’ is closed to new replies.