Joomla Templates Club 406,261 posts

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#193391

Hello Happy new year All

i need code to make Main Menu (navbar) fixed for the top but only after the page is scrow down. the same like Ja Magz template navbar, and where to put the code?

thanks !

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517069

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as set “Optimize CSS” to “No” within your Template Manager–Options–General settings

1 user says Thank You to TomC for this useful post

1. costabreeze

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517070

http://www.gamebreeze.net
Optimize CSS – NO
thanks

i try with something like navbar-fixed-top but the navbar going over the header were is the logo..

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517072

Try This . . . .

Within file path –> templates/ja_obelisk/css/template.css
at line 1946, add the following properties – as follows:


.t3-mainnav {
background: none repeat scroll 0 0 #151515
border-bottom: 0 none;
border-top: 0 none;
position: fixed;
width: 100%;
top: 40px;
}

then, at line 5366, modify as follows:


.t3-header {
background-color: #F8F8F8
background-image: linear-gradient(to bottom, #FFFFFF, #EEEEEE)
background-repeat: repeat-x;
padding-bottom: 20px;
padding-top: 20px;
position: fixed;
width: 100%;
}

There’s a bit more to do with it, but see if that is going in the right direction.

1 user says Thank You to TomC for this useful post

1. costabreeze

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517076

Yes thats going in right direction but forgot for t3-header i dont want t3-header fixed, need to be hide when somebody scrow down a bit the webpage(i dont gonna use the code for t3-header).
1 Now t3-mainnav has to be fixed for top (0px) but only when the page scrow down a bit

and need to be fixed some bugs i see now when i scrow down the page the modules with adsense code are over the t3-mainnav! dont need to be like that t3-mainnav shoud stay over every module on site page right ? (edit only adsense code not the module)

i use only
at line 1946, add the following properties – as follows:
Code:
.t3-mainnav {
background: none repeat scroll 0 0 #151515
border-bottom: 0 none;
border-top: 0 none;
position: fixed;
width: 100%;
}

at line – 5590
.t3-mainbody {
padding-bottom: 40px;
padding-top: 65px;
}

I use different t3-mainbody padding because on my site t3-header padding is different from default code on ja obelisk !

check on my site how is it now

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517079

i add to t3-mainnav

z-index: 99999;

now ALWAYS appears above anything on a page!

only left to be fixed right for the top after scrolling down the page… but i dont know this how to do it ( ithink its java code rirht?)

i found this for reference if helps ( maybe we can use ja magz javascript ??? )
http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#517107

You can try to put override css styles below into the end of template.css file:

.t3-header {
margin-top: 45px;
}

.t3-mainnav {
top: 0;
}

1 user says Thank You to phong nam for this useful post

1. costabreeze

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517158

<em>@Leo Burnetts 404157 wrote:</em><blockquote>You can try to put override css styles below into the end of template.css file:

.t3-header {
margin-top: 45px;
}

.t3-mainnav {
top: 0;
}
</blockquote>

not this ! how i say i need the efect of ja magz template mainnav :confused:
leave t3-header its nothing about it

Check this example.

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517164

Can you help me with this simple ?

$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$mainMenuBar = $('#mainMenuBar'),
$mainMenuBarAnchor = $('#mainMenuBarAnchor');

// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainMenuBar.addClass('stick');
$mainMenuBarAnchor.height($mainMenuBar.height());
}
else {
// Unstick the div.
$mainMenuBar.removeClass('stick');
$mainMenuBarAnchor.height(0);
}
});
});

[costabreeze Friend costabreezeJoin date: May 2013Posts: 29Downloads:0Uploads:7 Thanks: 11 Thanked: 5 times in 1 posts]

#517170

job done 🙂

i add this css code in template.css file (clone from ja magz template)

.t3-mainnav.min-mainnav {
width: 100%;
top: 0;
}
.affix {
z-index: 1030;
}

then i copy from ja magz/js/script file to ja obelisk/js/script file this

// add class for mainmenu when scroller
(function(){
var min = null,
sid = null,
mainnav = $('#t3-mainnav'),
navbar = mainnav.find('.navbar:first'),
breakpoint = navbar.length ? navbar.offset().top : 0;

if(mainnav.length){
$(window).scroll(function() {

if(min != $(window).scrollTop() > breakpoint){
min = !min;

min ? mainnav.addClass('affix') : mainnav.removeClass('min-mainnav');

//force reflow
mainnav[0].offsetWidth;
mainnav.prevAll('.hplace').remove();

if(min){
$('<div class="hplace clearfix"></div>').insertBefore(mainnav).css('height', mainnav.outerHeight(true));
mainnav.addClass('min-mainnav');
} else {
mainnav.removeClass('affix');
}
}
})
}

})();

and now looks perfect http://www.gamebreeze.net

Thank you TomC for helping me with this 🙂 ( can you edit topic name to navbar fixed for the top after scroll )

1 user says Thank You to costabreeze for this useful post

1. phong nam

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#517415

Glad I could be of assistance . . . All the best with your continuing site development.

🙂

[Author]

Posts