Floating main menu

andrewwinkler

In JA Social II's default style, I would like the main menu to remain floating at the top of the screen when scrolling and down I'm not fussed about the logo block, but the menu block needs to stay easily reachable by the users by floating on top of the screen. How can I make that happen?

Ninja

andrewwinkler
Hi

First, add below code in custom.css file

.t3-mainnav.affix {position:fixed;width:100%; z-index:10;}

now go to "/tpls/blocks/mainnav.php" in template "ja_social_ii". Find this code


<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav ">

replace it with


<nav id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav affix">

now go to file "/tpls/blocks/header.php" in template "ja_social_ii". find this code


<header id="t3-header" class="wrap t3-header">

replace it with


<header id="t3-header" class="wrap t3-header data-spy="affix" data-offset-top="48"">

Let me know if it helps

andrewwinkler

It does and it doesn't. On some pages is does exactly how intended and on others - for example the JomSocial page - it keeps floating in the position where it used to be when I started scrolling rather than jumping to the top of the screen. I also realised that it probably would look better if the logo block stayed put/floating together with the main menu. The jumping of the mainnav block to the top, when the logo block is disappearing is just too irritating.

Ninja

andrewwinkler
Hi
Kindly edit details in first post : https://cl.ly/3y3R0p24250G
And submit a site super user details also share a screenshot of issue so i can check it directly on your site.

Regards

andrewwinkler

Okay. Done. Thank you for looking into it. I've also noticed a new problem. Since I made that change with the mainnav menu, the customhtml modules titled "Breadcrumb ....." are no longer being displayed in "masthead" position. Btw, in case you are wondering, why I defined the breadcrumbs manually instead of using the Joomla breadcrumbs module is that my menu structure is too complex for the automatic Joomla breadcrumbs to make any sense.

andrewwinkler

I know now what's happening. The new settings truncate the top of the page, which makes sense because don't want to show the menu twice. However, the truncation seems to be too "generous", with the result that breadcrumbs and the upper half of the title are not shown as they should.

I thought I can fix it by reducing the value in

<header id="t3-header" class="wrap t3-header data-spy="affix" data-offset-top="48"">

from 48 to something lower, for example 36, but that made no difference, in spite of clearing the cache and recompiling the template to Less, but that made absolutely no difference.

Ninja

andrewwinkler
Hi
Its hard to assume the issue as you have customization for module in header.
Kindly share the URL on which you have the issue.
A screenshot of issue and screenshot how you would like to display the header.
At this time the menu is sticky and working fine.

Regards

andrewwinkler

I inserted the credentials to the site earlier in the first item of this ticket. In case you don't have access to that information, here is the link to the site: https://tvet-rkp.net The best page to check the problem on is the https://tvet-rkp.net/tvet page.

andrewwinkler

I really would like it if the menu block behaved exactly like the button block on the Joomla backend, which jumps to the top. Please see attachment. The only difference is that in our case it's not some button block but the menu itself that stays on top. The logo block with the login/logout link can disappear, or stay, if that's easier. Right now a lot of content gets truncated, including the custom html breadcrumb module on top of the masthead block, so if that problem goes away by not making the logo block go away, I'm fine if it stays. However if the logo block disappears, it should happen no faster than the button block on the Joomla backend. Would be great if you could help me with that.

Ninja

andrewwinkler
Hi
So you would like header and main nav both stay on the top
I removed older code and added this code in custom.css
Now your logo bar and menu both are fixed.

@media (min-width:767px){

.scrollDown .t3-header{top:0px!important}
.t3-header{position:fixed;width:100%;z-index:99}
.t3-mainnav {z-index:99!important;position:fixed!important; width:100%!important;top:118px}
}

This is best you can do to make it static.

Regards

andrewwinkler

Great, thanks. Just one not so minor issue. Both masthead items (breadcrumbs and icons) are no longer visible. It seem they are being truncated. Do I just need to play around with the value "118"?

Ninja

andrewwinkler
Hi
Add this code in custom.css file to add padding above masthead

@media (min-width:767px){
.t3-masthead {padding-top:175px;}}

Regards

andrewwinkler

I just tried changing the value of 118 by plus/minus 50px, but that did not work, in fact made things worse. I like the way the menu and logo stay fixed on top but I still need to be able to see the two masthead items, breadcrumbs and icons in the TVET section. I can't even see and click the edit button (https://tvet-rkp.net/brunei-country-profile) or enter a new status in the Community section.

andrewwinkler

Thanks again. That's looks great now on the homepage [https://tvet-rkp.net] and on the TVET section [https://tvet-rkp.net/tvet] but cuts off way too much everywhere else. I therefore had to disable the setting in the custom.css for now.