div gkMainMenu fullwidth

Hi,
I'm using sticky panel (a plugin) to stick menus. The Plugin is adding a new css class "detached" to the chosen element. So far it works very simple. The actuel css-code in override.css is

Code: Select all

#gkMainMenu.detached {
   padding-top: 0px;
   background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
}

This div is containered in another div, so its width can't be more than the parent div. But by scolling down I want the div to get fullwdith (like the sticked menu on gavick.com by scolling up).

Can I achieve that using only css or is there more work to do.

Thanks so far

Günther.

URL I'm talking about is: joomla.gymbgd.de

Hi

I cannot see this new layer in source code. Can You please tell me how You wish this menu to act so I'll may be able to provide a code to achieve it.

Hi
the above div-elemnt is now online and sticked by scolling. Perhaps it is possible to let appear a fullwidth element, which contains the mainmenu and the logo, after some scolling down.

Thanks and best regards,

Günther.

Hi

Please change Your code in override.css to this:

Code: Select all

#gkMainMenu.detached {
    background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
    left: 0 !important;
    padding-top: 0;
    width: 100% !important;
}


Thanks,
works great so far. How can I finally achieve, that the menu stays on its initial position after it is detached. Actually it is centered after class detached is added.

Treid the follwing with no effect:

Code: Select all

    #gkMainMenu.detached {
        background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
        left: 0 !important;
        padding-top: 0;
        width: 100% !important;
        text-align: right !important;
    }


Best regards,
Günther.

Hi

I'm afraid this can't be done without changes to template's code. Basically there is a need of one more layer there, inside layer which gets class "detached". Than You will be able to manipulate with it's position. Try add it in /layout/default.php

Thanks so far for your help.
I've added a parent <div id="gkMainMenuParent"> containing the cild <div id="gkMainMenu"> within the default.php. The output is working according to firebug. Then I added the class="detached" to the parent div, so css is now looking like this:

Code: Select all

#gkMainMenuParent.detached {
   padding-top: 0px;
   background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
   left: 0px !important;
   width: 100% !important;
}


The former detached cild div is now not sticky, so it hasn't class="detached" because it's inside the parent one. Actually while scrolling down the parent div increases to fullwidth and the cild div is floating right. This float is set in menu.css#12

How can I achieve my final goal to let the cild div in a fixed position within the parent, although the parent div increases its width.

Thanks and best regards,
Günther.

Nearly solved the issue thrue the follwoing css code and the trick generating the fullwidth div, which contains the menu elements with the logo detached. The logo disappears while scrolling down.

Code: Select all

#gkMainMenuParent.detached {
   padding-top: 0px;
}

#gkMobileMenu.detached {
   padding-top: 0px;
}

#gkLogo.detached {
   background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
   left: 0px !important;
   width: 100% !important;
   height: 55px !important;
   padding-top: 5px;
}

#gkLogo.detached > img {
   display:none;
}


It remains only one problem in mobile viewport (320x480, 360x640): The gkLogo element doesn't respond to the css

Code: Select all

width:100% !important;


So the gkMobileMenu div is sticky but outside the grey bar generated by the logo. How can I force the 100% width eben in mobile mode.

Thanks and best regards,
Günther.

Solved!
Placed a div on third position in the header which is sticked with class detached and produces the floating background. The menu and logo are also detached with no background. This works for all viewports.

The css code is:

Code: Select all

.detached {
   padding-top:100px;
}

#gkMainMenuParent.detached {
   padding-top: 0px;
}

#gkMobileMenu.detached {
   padding-top: 0px;
   top: -10px !important;
}

#gkLogo.detached {
   padding-top: 5px;
   width:150px !important;
}

#gkHeaderBanner.detached {
   background: rgba(14, 22, 35, 0.89) none repeat scroll 0 0;
   left: 0px !important;
   width: 100% !important;
   height: 55px !important;
   padding-top: 5px;
}


The default.php code snippet is:

Code: Select all

<header id="gkHeader"<?php if(!$this->layout->isFrontpage() && !in_array('frontpage', explode(' ', $page_suffix_output))): ?> class="gkPage"<?php endif; ?>>      
         <div id="gkHeaderNav">
            <div class="gkPage">
                    <div id="gkHeaderBanner">
                  </div>
               <?php $this->layout->loadBlock('logo'); ?>
                
                    <?php if($this->API->get('show_menu', 1)) : ?>
                    <div id="gkMainMenuParent">
                        <div id="gkMainMenu" class="gkMenuClassic">
                            <?php
                          $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                           $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                       ?>
                        </div>
                     </div>
                    <?php endif; ?>


If the gkMainMenu is detached directly in some versions of firefox there are problems with linebreaks. So the gkMainMenuParent div contains the gkMainMenu.

Thanks and best regards,
Günther

Hi

Actually this is not what I had in mind, but if it works than I'm happy. My idea was to make an inner div which would be using a code:

Code: Select all

.detached > div {
max-width: 1200px;
margin: 0 auto;
}