Change width of drop down menu

Hey there Mitchellcole,

How are you doing today?

As each menu item has it’s own ID you should be able to easily target that specific one and adjust its width with some custom CSS.

Please try adding the following CSS code in the style.css file of your child theme or if your theme doesn’t have custom CSS tab add it in your site using the following plugin:

http://wordpress.org/plugins/simple-custom-css

li#menu-item-50 {
    width: 215px;
    padding: 0 30px 10px 30px;
}

This should be the result http://screencast.com/t/z3NCN7Bevce6.

Hope this helps 🙂

Cheers,
Bojan

Hey again,

Glad that the above helped, to move that menu item to the right please try adding the following:

@media screen and (min-width: 600px) {
ul#Main_nav {
    width: 100%;
}
#menu-item-51 {
    float: right;
}
#menu-item-51 ul.sub-menu {
    margin-left: -200px;
}
}

This should be the result http://screencast.com/t/Pt68h9QmQ.

Hope this helps 🙂

Cheers,
Bojan

Hi,

try this adding this to functions.php, it will be better if you have child theme then ad it to functions.php of your child theme.

add_filter('wp_nav_menu_items','add_search_box_to_menu', 10, 2);
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'primary' )
        return $items.get_search_form();

    return $items;
}

Hey again Mitchellcole,

This would require editing your theme header.php and adding code to the correct holder.

Please also see the following http://wordpress.stackexchange.com/questions/196885/how-do-i-add-a-search-bar-to-my-header

You’ll also need to adjust CSS in order to have everything in the same line.

Best regards,
Bojan

Hi,

if you try this css for pushing search box toward right so it will show like this http://i.imgur.com/q9vX7N8.png

.bop-nav-search.menu-item.menu-item-type-search.menu-item-object-.menu-item-54 {
    float: right;
}