Reduce widths of 3 drop down menus into one horizontal line

Can’t see what selectors to use from an image.

Assuming you know what the selector(s) are, then try adding width: 50%; to the CSS and then adjust.

Rdellconsulting,

What is a selector? I am unfamiliar with CSS coding. How can I change the width of the three drop down menus for them to appear on one single line?

I look forward to hearing from you.

Kind regards,

Yunis

I need a link to your site so I can use Firebug.

Read this and you’ll see what a selector is.

Rdellconsulting,

I would gladly give you a link to my website so long there was no chance of it being shared with others.

I tried to figure it out which CSS code I had to edit using Firebug and Chrome browser ‘Inspect Element’ tools. I failed in trying this. I also have no idea on how to find and edit the corresponding code in the WordPress Customizr editor.

Some images of the code revealed by Firebug are in below links.

I was also wondering there if another way of reaching you privately with my URL to investigate.

https://s14.postimg.org/k6txkrpcx/Customizr_theme_CSS_menus.png
https://s14.postimg.org/pgywc29lt/Customizr_theme_CSS_menus_width_css_code.png
https://s14.postimg.org/oq666a78h/Customizr_theme_CSS_menus_category_firebug.png
https://s14.postimg.org/4mr57z4m9/Customizr_theme_CSS_menus_keywords_firebug.png

I look forward to hearing from you.

Kind regards,

Yunis

Forum rules don’t allow me to give you private contact details. However, your images have given me what I needed.

I’ve taken CSS from one of my sites with a Contact Form and adapted it:

#search_keywords input[type="text"] {
    border-radius: 5px;
    line-height: 1.7;
    width: 100%;		/* Adjust this */
}
#search_keywords input[type="text"], textarea {
    border: 1px solid #999;
    border-radius: 5px;
    color: #000;
    font-size: 1.4em;
    line-height: 1.7;
    padding: 3px;
}

You’ll have to experiment. For example, this alone might work:

#search_keywords input[type="text"] {
    width: 100%;		/* Adjust this */
}

Then do the same with #search_location and #search_categories.

Come back and let me know how you get on.

Rdellconsulting,

In an attempt to reduce the widths of drop down menus into one line, I entered the code you gave me in “Custom CSS” edit box of the Customizr theme. Nothing changed. Was this the proper area where I should have entered the CSS code?

This code was already in that box:
.entry-title:before, .widget-title:before {
content: none !important;
}

Then I added your CSS code under neath it which did not result in any improvement:

#search_keywords input[type=”text”] {
border-radius: 5px;
line-height: 1.7;
width: 33%; /* Adjust this */
}
#search_keywords input[type=”text”], textarea {
border: 1px solid #999;
border-radius: 5px;
color: #000;
font-size: 1.4em;
line-height: 1.7;
padding: 3px;
}:

I look forward to hearing from you.

Kind regards,

Yunis

I’d recommend you set up a Child Theme and add code to the style.css.

However, CustomCSS is a good place to test things so I don’t know why it shouldn’t have worked.

Maybe a typo but the final }: should be just }

Without a link, I can’t diagnose why – Catch 22.

Rdellconsulting,

A link to my website is below:

https://www.digitalmarketingvacancies.com/jobs/

Look forward to hearing from you.

Kind regards,

Yunis

Try this:

.search_keywords, .search_location {
    clear: none;
    display: inline-block;
    height: 40px;
    line-align: top;
    padding: 1%;
    width: 30% !important;
}
.search_categories {
    clear: none;
    display: inline-block;
    padding: 1%;
    width: 40% !important;
}
.chosen-container .chosen-drop {
    width: 30%;
}
.chosen-container-multi .chosen-choices {
    height: 30px;
    margin-top: 5px;
}

Rdellconsulting,

Thank you for your very helpful reply.

I was wondering if the width of the ‘Choose a catagory’ list could also be increased so that it is properly aligned.

https://www.digitalmarketingvacancies.com/jobs/

Look forward to hearing from you.

Kind regards,

Yunis

Try this:

.chosen-container .chosen-results, .chosen-container .chosen-results li {
    width: 100%;
}
.chosen-container .chosen-drop {
    width: 50%;
}

(Note the 2nd item replaces the 30% code above)

Rdellconsulting,

Thank you for the assistance you have given me so far in this area.

My website still has the following two issues to resolve.

I would like the visitor to see the two drop down menus expand and decrease merely by going over them with the mouse pointer i.e. no clicking (hovering??)

No natural hand pointer figure appears when visitor hovers over the “choose a category” menu. How can this be corrected?

This is an image of website page explaining it: https://s30.postimg.org/ahgnokx0h/explaining_menu_hovering_formatting_request.png

This is all the CSS code you have given me and that is in the “Custom CSS” option box of the Customizr theme:

.search_keywords, .search_location {
clear: none;
display: inline-block;
height: 40px;
line-align: top;
padding: 1%;
width: 30% !important;
}
.search_categories {
clear: none;
display: inline-block;
padding: 1%;
width: 40% !important;
}
.chosen-container .chosen-drop {
width: 100%;
}
.chosen-container-multi .chosen-choices {
height: 30px;
margin-top: 5px;
}

.chosen-container .chosen-results, .chosen-container .chosen-results li {
width: 100%;
}

.entry-title:before, .widget-title:before {
content: none !important;
}

My website URL:
https://www.digitalmarketingvacancies.com/jobs/

I look forward to hearing from you.

Kind regards,

Yunis

#1 explained here

#2 Change the line in your css to:

.chosen-container-multi .chosen-choices {
...
  cursor: pointer; /* currently says text */
...
}

Rdellconsulting,

Thanks for your reply. However, I was asking for something different at #1.

I am looking for CSS code modification that will cause the contents of drop down menus Category and Regions to appear without clicking. That’s all. The same process we see with the Sliders and Layout menus at the Customizr demo theme. https://demo.themesandco.com/ The user can see these menu contents without clicking.

I look forward to hearing from you.

Kind regards,

Yunis