Menubar width with StickyNav [#2825861]

while I try other themes, I always navigate to Mayo and the support in keeping it up is appreciated.

~~~

I am trying to get the best of all worlds and would like to have a stick menu at the top when a user scrolls.

I am not sure if this is the right place, or maybe this is an issue for sticknav, however, I will give it a go here.

Maybe an easy fix, but I was wondering how the menubar area could inherit the width settings in Mayo+responsiveness in the Mayo theme.

This demo kind of sums up my problem where the menubar, when it becomes active for stickynav, does not inherit the menubar width or the page width setting and stretches to right of the page.

Scrolling down on this page sums it up.
http://d7mayop.norgo.com/lorem-ipsum

Thanks in advance for taking a peek.

Comment	File	Size	Author
#3	mayo-scrolled-sticky.JPG	121.78 KB	norgo
#3	mayo-0.JPG	59.69 KB	norgo

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

8 November 2016 at 19:15

norgo created an issue. See original summary.

Comment #2

mermentau CreditAttribution: mermentau commented 9 November 2016 at 17:50

I'm not seeing the StickyNav and the page does not scroll.

Comment #3

norgo CreditAttribution: norgo commented 10 November 2016 at 01:18

File	Size
mayo-0.JPG	59.69 KB
mayo-scrolled-sticky.JPG	121.78 KB

hmmm, sorry, maybe a temp blip on my network.

I doubled the long page in case a browser was not allowing scrolling + added a couple screen shots.

Thanks again

Comment #4

mermentau CreditAttribution: mermentau commented 10 November 2016 at 02:09

Try messing with .stickynav-active in stickynav.css. Start with changing width: 100% to 50%.

.stickynav-active {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    position: fixed;
    top: 0;
    width: 50%;
    z-index: 1000;
}

Changed in Firefox/Firebug and it seems to work.

Comment #6

norgo CreditAttribution: norgo commented 10 November 2016 at 16:39

Thanks for the quick replies. Both work for me.

#4 would have to be done a per site basis

#5 works well also and bonus of inheriting the page width.

It does pop out a bit on the right which is ok with me.
Is that is a padding issue?
I tried subtracting some px in your code @Avani.bhut, but that also affects the width when it is not sticky it seems.

I also added in the responsive menu to get the best of all worlds covered.

http://d7mayop.norgo.com/lorem-ipsum
@Avani.bhut code added to stickynav.js
Responsive Menu added but width is slightly longer with new code and when stickynav is activated.

Comment #7

norgo CreditAttribution: norgo commented 19 November 2016 at 00:34

just to add to the above with respect to:

"It does pop out a bit on the right which is ok with me."...

I discovered that this has to do with selecting in Appearance settings.

2. Gloss black image background.
which then uses black-menu.css
changing
padding: 4px 4px 4px 8px;
to
padding: 4px 0px 4px 0px;
seems to do the trick and eliminates the pop-out when sticknav is activated.

thanks again.