More horizontal space for nav items and less for logo

[lobsterass]

Hi!

My nav items need more horizontal space and move closer to the logo. I’ve temporarily removed the search function and the WPML flags in the nav to make it all fit into the current ul#menu-monroedesign.menu 780×148 space. Please see it live here.

I’ve tried this and it makes it look like attached image:

#logo a.logo-link {
width: 230px;
}
.span4 {
width: 230px;
}
#main-navigation ul.menu {
width: 920px;
}

It seems to work in FF but not in Chrome or Safari.

Please tell me how I reduce the space between the logo and the nav menu items so that my nav menu is ALWAYS only one row.

<3

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Don’t try to alter the span4, it will affect the whole site wide. Try this.

#main-navigation {
    width: 90% !important;
}
.std-menu {
    width: 10% !important;
}

Let us know,

Thanks,
laranz.

[lobsterass]

Hi Larannz!

Thanx but that CSS makes my nav menu to look like in the image (from Safari) provided. I believe I need another 160 px for the flag and search glass to fit in a one row nav bar. The logo has too much horizontal white space on the right.

I want to make sure the menu never becomes 2 lines and I want to make sure it still looks good on mobile etc.

Please help.

<3

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

Did you put the CSS, I didn’t see any Custom CSS entered now? I try the Chrome developer kit and it works, http://take.ms/UQeNW

Let us know,

Thanks,
laranz.

[lobsterass]

Hola!

I put back your CSS now but it still doesn’t make the WPML flag (and the search-glass) fit. I can’t keep flag and search glass active for you because the site is live and they make nav menu 2 lines. Please see attached image of this.

In other words, I need to fit another 160 px or so horizontally into that nav menu. I could possibly do without the search glass but I definitely need more room for the WPML flag.

Cheers!

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

So before adding the language switcher the CSS I gave works nice? If so, play with the % values to get it right after adding the WPML.

Let us know,

Thanks,
laranz.

[lobsterass]

Laranz,

No matter what values I put into that CSS (I’ve tried them all), it never moves the nav menu items to the left – closer to the logo – which was what I wanted. I don’t want the menu to extend that far to the right, obviously. It cuts off the sum in the shopping cart. The best value was 98% and 2% and that looked like in the attached images. Not good.

Could we please move the menu item PORTFOLIO so that it’s only 50 px white space between LOGO and PORTFOLIO?

Cheers!

Attachments:

You must be logged in to view attached files.

[laranz – SUPPORT]

Hi,

I forward this to one of my colleague to take a look at the issue.

Let us know,

Thanks,
laranz.

[lobsterass]

Hi again!

Are we having any luck on this issue with allocating less white space on the right side of my nav bar logo?

I’m getting ready to launch my translated version of the site. When I do so, it would be nice if the nav bar also fits my WPML flags, search glass (preferably) and the bigger space the shopping cart needs when filled with products – without making the nav bar expand to 2 rows.

<3
/Angela

[Swift Ideas – Ed]

Hi @lobsterass

Without making the logo smaller and/or navigation smaller, I don’t think it will be possible to fit all of those in at that viewport size..

– Ed

[lobsterass]

Hi Ed!

Really? It doesn’t seem like the 190 px width of my logo is very big for a logo. I just want to make that 220 px blank space padding to the right of it smaller. Even if I make the nav menu items smaller than 15 px, I have trouble fitting everything…and older people may not be able to read my menu. Is it really impossible to reduce that 220 px padding?

<3

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Yes – however your screenshot referred to the viewport down, where everything is condensed. That is where your issues will occur as you lose a lot of real estate in the width department.

– Ed

[lobsterass]

OK. 🙂 I’m not totally clear on what the viewport down is. I googled it. It seems to be something about how the menu adjusts responsively to different screens. Is there a way to adjust it then? I have no idea of what I’ve done to loose real estate.

<3

[Swift Ideas – Ed]

It’s not something you’ve done – as you reduce the window size, as the theme is responsive, it reduces the container width in order to keep all the content visible. Obviously in terms of the header, this means less space for the menu (for it to fit).

Your best bet here would be to remove or consolidate one or two menu items to free up some space.

– Ed

[lobsterass]

OK. My stubborn perfectionist ass is not totally happy with this but I guess there is a limit for what can be done. 😀

I’ll try to consolidate my menu items to fewer items.

Two more questions. Then I’ll quit bugging you…Today at least. 😉

1. Would a resize of the logo from the current 190 px to like 150 px actually give me (190-150=40) 40 extra px? I’m asking this perhaps silly question because it seems like there’s an allocated default width for logos no matter what.

2. Is there a link somewhere in this forum for one’s own profile and started topics? I have to use my email every time to find it.