More horizontal space for nav items and less for logo

[Mohammad – SUPPORT]

Hi,
1- I see that you have used this custom css code like this
:-

#logo img, #logo img.retina {
    width: 190px;
}

You need to change the pixels in this code only.

2- Please check this URL http://www.swiftideas.com/forums/users/lobsterass/topics/.

Thanks
Mohammad

[lobsterass]

Hi,

1. That was not an answer to my question. I know how to resize the logo and I don’t need CSS to do that. That CSS skews the logo so I don’t really understand how that would ever be a solution? I’m asking how to reduce the 220px padding on the right of the logo?

2. Yes, I know what the link is. My point was that it would be useful with a clickable link/button to quickly get to one’s user profile. I see somebody agreed because now there’s suddenly a “User Links” widget visible to right. Perfect!

[Kyle – SUPPORT]

Hi

Try this:

.header-row .span4.logo-left {
  width: 20%;
}
.header-right.span8 {
  width: 75%;
}

– Kyle

[lobsterass]

Ah! Kyle that works!

The only little thing with it is that when the window is 980-1199 px wide – please see attached image;) – menu becomes 2 rows. I believe I had this issue before your great CSS too…so I may not be the only one with the issue?

Is there an easy way to make it show the responsive-4-spripes-menu-symbol in all windows below 1200px? Then this would be PERFECT!

<3

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you try the code below to see if it works. Really lack of space for everything.

@media (max-width:1199px) and (min-width:980px) {

.header-row .span4.logo-left {
margin-left: -10px!important;
}

.header-4 #main-navigation {
margin-right: 0;
margin-left: -100px!important;
}
.header-right.span8 {
margin-left: 10px!important;
}

.header-right > nav {
float: right;
margin-right: -80px!important;
margin-left: 0px!important;
}
}

-Rui

[lobsterass]

Hola Rui!

Nope, sorry. That made the menu 2 rows at 980-1211px window. Please see attached image.

I consolidated the menu now and removed one nav button. I still have a 2 row menu when window is 980-1211px.

<3

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Fine for me at that width: http://d.pr/i/1b0jb/1JSAW61j

– Kyle

[lobsterass]

Hey Kyle!

Yeah, that was with that code from Rui. I changed it back. The only css there now is:

.header-row .span4.logo-left {
width: 20%;
}
.header-right.span8 {
width: 75%;
}

<3

[lobsterass]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

I adjusted my css, clear your cache and try again.

-Rui

[lobsterass]

Hola awsome developers!

Thank you! This is almost working flawlessly now. 🙂 Yeah!

There’s just a small issue that happens when the window is between 980-1199px wide in FF and no items in cart. Please see image. The menu stacks over cart.

I can think of two possible solutions:

1. I tried to solve this by reducing padding between menu items. It doesn’t seem to work. Any suggestions?

nav#main-navigation .menu > li > a {
    padding: 0 8px;
}

2. Is it possible to make “the responsive menu stack symbol” stay on all windows widths 0-1200px instead?

I promise to be done bugging you soon. Thank you for your amazing patience with me…and my friggin fresh Neighborhood site!

<3

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Try this one.

.header-4 nav .menu > li > a, .header-5 nav .menu > li > a, .header-4 nav#main-navigation .menu > li > a, .header-5 nav#main-navigation .menu > li > a {
padding: 0 5px!important;

}

-Rui

[lobsterass]

EXCELLENT! Yes! I’m very happy with this! Please see image! 😀

And for others who may need more space for nav titles in menu, here is the final code used on this website:

.header-row .span4.logo-left {
width: 20%;
}
.header-right.span8 {
width: 75%;
}
.header-4 nav .menu > li > a, .header-5 nav .menu > li > a, .header-4 nav#main-navigation .menu > li > a, .header-5 nav#main-navigation .menu > li > a {
padding: 0 5px!important;
}

Thanx Rui, Kyle and Ed for making my day!
<3

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

haha That’s great
-Rui