Hello,
I have installed Superfish which I like a lot though for some reason the menu is no longer showing a background color at 100% and the nav only has color for as many links as I have made. Previously, 2 days ago in fact, it was showing a background color across the whole menu area and added links as I added them always with the background color 100% width regardless of how many links.

When I make the site small for phone, the main menu selector is only as big as the text, and the links do go 100% but not
when on a desktop. I tried to email you but the system says I cannot. Please assist as I am at the final stretch of this site and need to get it completed.

Thank you for your assistance!

CommentFileSizeAuthor
#3 Superfish-white-background.png5.13 KBNick Hope
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

shrunoshand created an issue. See original summary.

shrunoshand’s picture

Assigned: shrunoshand » Unassigned

Curious if anyone is having this issue and how I can contact the developer as the system will not allow me as I am new to the community.
Nothing I do will get this back to where it first worked and I need to rectify this ASAP so I can complete this site.
So, if anyone has a fix or any thoughts on why the nav will only extend to the width of each menu item and not expand the width of the site, as it did previously, I would be very grateful!
Thanks a ton.

Nick Hope’s picture

I have the same issue (Superfish 8.x-1.2 in Drupal 8.5.0-beta1). The space to the right of the menu is white and I can't find any way to change it. Even my browsers' developer tools tells me it should not be white.

Superfish white background

@shrunoshand, Did you ever find a solution?

Nick Hope’s picture

After some sleep I solved this by setting background color and height on the containing region's div:

#navbar {
    background-color: #ff0000;
    height: 2.5em;
}
Nick Hope’s picture

Just following up with a more complete version of my CSS, which is responsive. By default it's in smallscreen mode, then changes for when menu items are wrapping onto 2 lines, then finally on 1 line. Obviously this could be done with just 2 alternatives, and the smallscreen mode remaining until the display is much wider than 360px.

/* Smallscreen mode for <360px wide display */
#navbar {
    background-color: #fcfcfc;
    height: 3.5em;
    text-align: center;
}
#block-mainnavigation > ul {
    text-align: center;
    padding: 0;
    width: 100%;
}
#block-mainnavigation .sf-menu li {
    float: none;
    position: relative;
    display: inline-block;
    text-align:left;
}
/* Make Navbar height double when menu wraps to 2 rows */
@media (min-width: 360px) and (max-width: 668px) {
    #navbar {
        height: 5em;
    }
}
/* Make Navbar height single when menu fits on 1 row */
@media (min-width: 669px) {
    #navbar {
        height: 2.5em;
    }
}
ivnish’s picture

Status: Active » Closed (works as designed)

Just add width:100% or equivalents in your CSS file