Navbar bug, not fitting on screen. Help with vertical spacing please.

Jamesbjenkins · August 26, 2013

OK, so my navbar takes up too much vertical space and SM is pushing it off the bottom of the page. Obviously, this is unacceptable, and SM isn't answering my question, after a week of asking the heroes.

So, someone with more CSS knowledge than I, please help me decrease the vertical space between my navbar items so I can have them all fit on the screen together. It works just fine for my screens, but testing it out on a 1344x768 or smaller gives some weird results.

Thanks in advance.

einat · August 26, 2013

If your's is the same problem as mine, then this is the reply I got from one hero (after going through several who didn't understand what I was talking about.
See what happens when you expand "Travel" on my left-side nav bar here: www.einatix.com

SM hero in an email on aug 6, 2013 wrote:

The expanded navbar does not push the footer down, but instead floats over the top.
When the navbar is expanded in your Travel button, we don't move the footer down, we add space below it to accommodate the super long menu,
The footer remains at the same previous location, under the other content on the page, but not under the entire navbar menu.
We will pass this on to our QA team to see what we can do, and see whether or not this is by design or buggy behavior.

Jamesbjenkins · August 26, 2013

That's exactly what I'm seeing with my site, except I can't even reach my navbar items. They roll right over the footer and keep going off the bottom of the screen. This is definitely a bug, as there's no fix available within the system.

Hopefully, modifying with spacing using CSS will provide a usable workaround for the problem. All I need is the correct CSS coding. The stuff I put in didn't work at all.

Hikin' Mike · August 26, 2013

Try this:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink {
    margin-bottom: 10px;
    }

Jamesbjenkins · August 26, 2013

Hikin' Mike wrote: »

Try this:

.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink {
    margin-bottom: 10px;
    }

Winner winner chicken dinner. Thanks!

Now, I'll just wait until SM figures out how to fix their problem.

einat · August 26, 2013

It didn't work for me )-:
I even tried 5 pixels.
Does the CSS code apply to an accordion nav bar?

Hikin' Mike · August 26, 2013

einat wrote: »

It didn't work for me )-:
I even tried 5 pixels.
Does the CSS code apply to an accordion nav bar?

No. Try this:

.sm-accordion > .sm-accordion-item .sm-accordion-item-label {
    line-height: 36px !important;/*original 48px*/
    }
.sm-user-ui .sm-fonticon-small, 
.sm-user-ui .sm-fonticon-sml {
    font-size: 18px;/*original 24px*/
    }

einat · August 26, 2013

Hikin' Mike wrote: »

No. Try this:

.sm-accordion > .sm-accordion-item .sm-accordion-item-label {
    line-height: 36px !important;/*original 48px*/
    }
.sm-user-ui .sm-fonticon-small, 
.sm-user-ui .sm-fonticon-sml {
    font-size: 18px;/*original 24px*/
    }

This does work, but there's something strange. For expanding, there's a "+" sign, for collapsing there's a
"-" sign. With this code, the "-" sign is gone.
I can't tell why.

einat · August 26, 2013

einat wrote: »

This does work, but there's something strange. For expanding, there's a "+" sign, for collapsing there's a
"-" sign. With this code, the "-" sign is gone.
I can't tell why.

Even stranger - in chrome the " - " is not visible though when clicking where it should be, it collapses the menu. In IE9 the " - " is visible.

Hikin' Mike · August 26, 2013

einat wrote: »

This does work, but there's something strange. For expanding, there's a "+" sign, for collapsing there's a
"-" sign. With this code, the "-" sign is gone.
I can't tell why.

I don't know. I wasn't 100% sure if that would work. I guess it doesn't.

einat · August 26, 2013

Problem solved!
I changed the font size to 20. Maybe with 18 the " - " was just too faint.

Anyhow, you get James's Winner winner chicken dinner from me too (-:
Especially because I remember you helped me before, at least with one other tweak

Hikin' Mike · August 26, 2013

Glad it worked after all!

Jtring · August 27, 2013

einat wrote: »

Anyhow, you get James's Winner winner chicken dinner from me too (-:

Hikin' Mike, I found this very useful too. Thanks. -- Jim Ringland

Navbar bug, not fitting on screen. Help with vertical spacing please.

Comments