Fixed Menu for mobile view only for homepage

Hello,

I tried to search for the solution, but could not find. I would like to have menu on mobile to scroll along with the page, like it is now http://projects.lexart.me/mocha/about

I could do this by using

Code: Select all

@media only screen and (max-width:580px){
#gkTop {
    position: absolute;
}
}
@media only screen and (max-width:680px){
#gkTop {
    position: absolute;
}
}

However this way menu on homepage disappeared. Instead i would like menu to act like it acts originally but only for homepage.

Please help.
Thanks

Could You please post an url to your site?

Could You please post an url to your site?

Thanks for your prompt reply. The same url as i posted here it is http://projects.lexart.me/mocha

First of all, please clarify what You would like to do.
You must know, there are 2 types of menu - one "desktop" - that looks like standard menu, and one for mobile devices - it looks like 3 horizontal lines and shows when screen resolution is less than given value.
No with using of names "mobile menu" or "desktop menu" please describe what needs to be done .

First of all, please clarify what You would like to do.
You must know, there are 2 types of menu - one "desktop" - that looks like standard menu, and one for mobile devices - it looks like 3 horizontal lines and shows when screen resolution is less than given value.
No with using of names "mobile menu" or "desktop menu" please describe what needs to be done .

I have already described, and i know about menu types if you check on mobile or on resized browser links which i have send, you will notice, that on inner pages menu scrolls with the rest of the page and is not fixed like originally and like on desktop version, but on homepage menu is not visible at all, by menu i mean top part where logo and menu are located, so what i want is that for inner pages everything to stay as is, but on homepage to show the menu and top part again and to act as it acts on original template, does it make sense ?

Ok, I hope I understood you correctly

Code: Select all

@media only screen and (max-width:580px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}
@media only screen and (max-width:680px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}


This is what you should change in override.css

Thanks, but this is what I've done already , problem is that, now on homepage, menu disappeared, instead it should work as originally, to say in other words code you sent to me should apply to all pages, but not on homepage! Hope it makes sense

Ok, I hope I understood you correctly

Code: Select all

@media only screen and (max-width:580px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}
@media only screen and (max-width:680px){
#gkTop {
    position: absolute;
   top: 0px !important;
}
}


This is what you should change in override.css

Check it out correctly - I have added top: 0px !imoprtant;

Check it out correctly - I have added top: 0px !imoprtant;

I don't want this to be applied on homepage, i have cleared cache and i see that the same code applies on homepage as well, and top part is visible and scrolling like on other pages, please check attached image,
this is how it looks now

instead it should look like

and when scroll, menu should be visible, like this

Hope, now you can understand what i would like to get

Hi

I was asked to join discussion by @aliko1979 .

I must say, not an easy task. I think that the template's php hack I mentioned in the other thread cannot be avoided since not() css selector is not supported by IE.

Steps:

1. Remove all code about this in override.css
2. Edit /layout/default.php and about line 27 You will see this code:

Code: Select all

$tpl_page_suffix = $this->page_suffix != '' ? ' class="'.$this->page_suffix.'"' : '';


replace it with

Code: Select all

$tpl_page_suffix = ' class="' . JRequest::getVar('Itemid') != 'ID_OF_YOUR_HOMEPAGE' ? 'innerpage' : '' . $this->page_suffix . '"';


3. Use this css code:

Code: Select all

@media only screen and (max-width:680px){
body.innerpage #gkTop {
position: absolute;
top: 0px !important;
}
}


This way code will be used anywhere but not on homepage,

Hi teitbite, thanks for your help, but unfortunately solution does not work, i did as you described, but now everything works as originally, menu is fixed on all pages, any thoughts ?

Hi

I was asked to join discussion by @aliko1979 .

I must say, not an easy task. I think that the template's php hack I mentioned in the other thread cannot be avoided since not() css selector is not supported by IE.

Steps:

1. Remove all code about this in override.css
2. Edit /layout/default.php and about line 27 You will see this code:

Code: Select all

$tpl_page_suffix = $this->page_suffix != '' ? ' class="'.$this->page_suffix.'"' : '';


replace it with

Code: Select all

$tpl_page_suffix = ' class="' . JRequest::getVar('Itemid') != 'ID_OF_YOUR_HOMEPAGE' ? 'innerpage' : '' . $this->page_suffix . '"';


3. Use this css code:

Code: Select all

@media only screen and (max-width:680px){
body.innerpage #gkTop {
position: absolute;
top: 0px !important;
}
}


This way code will be used anywhere but not on homepage,

Hi everybody,

I could manage what i wanted quite easily and without any hacks I don't know why i haven't thought about this solution before...

Here is how i managed to do that:

1. I have removed all code from override.css dedicated to top part of the template.
2. I have duplicated the template.
3. Assigned duplicated template to the homepage
4. Added custom code into homepage templates custom css field

Vuala, homepage has sticky menu, inner pages have scrolling menu on mobile devices!

Hi

I must have made a typo in my code, had nothing to check it with, anyway Your solution is good, just took a little more work. But I've just came with 3rd solution which should be the best options from all I mean to use custom code module and use this code in every page except homepage. No hacks or multiple templates required Sorry I have not thought about this earlier.

Hi

I must have made a typo in my code, had nothing to check it with, anyway Your solution is good, just took a little more work. But I've just came with 3rd solution which should be the best options from all I mean to use custom code module and use this code in every page except homepage. No hacks or multiple templates required Sorry I have not thought about this earlier.

3rd solution also seems to be very good solution, thanks

P.S. Sometimes things are much simple then we think

Hi

I think the 3rd solution is best, because require lass work than others proposed and can be manage in one place (module). But if you have it solved than please just leave it as it is. None of the options can cause any damage.