Menu goes to 2 lines and Search function overlaps it

Hi - I created a test version of my clients site here: www.christianleonard.info
I then tried to implement those changes at www.standardrents.com, but since the menu was messed up I had to revert back to the previous layout.
If you look at the attached screenshot, the top image is how how the top menu should look, as it also does at www.christianleonard.info
However, in the bottom image in the attached screenshot, the menu goes to two lines, and the search icon overlaps it and makes the home button hard to click.
Im not sure why this is happening, both sites have the same custom css. Any feedback is appreciated.

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*full with menu*/
#masthead .col.grid_7_of_12 {
    width: 100%;
}

Best regards,
Support.

Thank you, I tried that at christianleonard.info and nothing happened. So, I just tried to remove the search icon, (since it was overlapping the home button) by adding this code:
#site-navigation .search-widget-handle { display: none;}
This removed the search icon, but it also removed the other two buttons on that row, the ‘contact’ and ‘rent payment’ links. Is there a way to remove the search icon without removing the other buttons/links in its row?

Hey there,

Just to confirm the website with the issues is the test site is:
http://www.standardrents.com,

The code works as you can see in this screencast: http://recordit.co/CGcKAOH8JD
Try it with the !important rule.

#masthead .col.grid_7_of_12 {
    width: 100% !important;
}

And I also don’t see the search icon, if you still have this code :
#site-navigation .search-widget-handle {display: none;} so I action your request.

Best regards,
Support.

I appreciate your help, but its still not working quite right. Please ignore standardrents.com, I had to remove Shapely until I can get it working correctly.

I was able to remove the search icon from Christianleonard.info, thank you for your help. However, the nav menu items on the second row of the navigation, ‘contact’ and ‘rent payment’, are spilling over into the blue area, and are not clickable. Is there a way to reduce the vertical space between the top row of links (home, faq, etc) and the second row?

I thought some custom code I had added may be conflicting with things so I added a screenshot of it here.

Maybe its better to show the custom code this way:
#masthead .col.grid_7_of_12 {width: 100% !important; }
#site-navigation .search-widget-handle {display: none;}
.post-content .entry-content .post-title a { font-weight: 600; color: #001c28; font-size: 35px; font-family: sans-serif;}
img.logo { max-height: 100%;}
li.menu-item a {font-size:12px;}
.shapely_home_parallax h3 { font-size: 34px;}
.shapely_home_parallax p { font-size: 17px;}
.entry-header { display: none;}

Hey there,

I hope you are well today and thank you for your question.

Remove this: #masthead .col.grid_7_of_12 {width: 100% !important; }

Add this.

.container.nav-bar {
width: 73%;
}

It should look like the attached, as well as you can edit it the percentage to your liking.

Best regards,
Support.

Thank you for the reply. I got this to work on some displays by using your code, though I dont believe it works on smaller screens, ie, 1024 width like in the attached screenshot. Is there a fix for this is this just a limitation of the theme? Thanks again for your feedback.

Would a fix be to add some custom code that shows the hamburger menu at any resolution 1024 or smaller?

Hey there,

I hope you are well today and thank you for your question.

Can use media queries to change this.

@media (min-width: 1024px){
.container.nav-bar {
width: 73%;
}
.main-navigation a {
color: #c30303;
}
}

Best regards,
Support.