Shape 5

Hi,

I'm new to the template club and am very excited to develop some websites with your templates! :)

I am developing a site here http://us508.directrouter.com/   ~tzwwbqem  (please remove spaces).

I changed the menu items padding using the custom.css file to make more room for menu items.

I would like to get rid of the space between the search icon and the last menu item. The Home menu item runs over the site logo, I would like to shift the entire main menu to the right if possible to get it all to fit. I understand I may have to make the menu item text smaller to get it all to fit, or change from all uppercase to upper & lower case, but I would also like to use the blank space between the last menu item & the search icon.

Thank you in advance for any advice you may be able to offer!

Hello,

I looked at your site and honestly your menu is too long. Even if you get this to fit on desktop view it will never fit on smaller screens when there is less space available. The general practice is about 4 or 5 main menu items, and you currently have 8. I would highly recommend consolidating your menu items and using subs; it will be easier for your website viewers as well.

As far as removing space between the menu and search that is not how this layout works, the menu is always centered in the header, so to reduce the space between the menu and the search would require modifying the template and causing the menu to not be centered anymore. Something like this in custom.css would probably do that, but again with the size of your menu you are going to have issues on smaller screens.

#s5_menu_inner {
float:right;
margin-right:42px;
}

mikek,

Thank you very much for the advice. I will see if my customer will reduce the number of menu items & maybe add some in drop downs.

Thank you!

Follow up,

I applied your code to remove the space from the right between the menu items & the search icon.

I also made the mobile menu trigger sooner by changing the trigger width in Extensions>Templates>Styles>Charity- Default>Main>Responsive Nav>Trigger Width

I changed it to 1400 so the menu items will not overlay the website logo. The mobile menu displays on tablets now, but that is the compromise of having so many menu items.

Thank you for your help!