David
|
Any ideas on how to make the horizontal Nav-Menu scroll with the content?
I tried changing the css for nav from relative to fixed, but i break the menu when i do this.
|
| |
jrgweb
|
Do you have an example of what you are looking for?
I have done this on a number of occasions.
http://demo.artisteertoday.com/menu_header/blog.html
|
| |
Dave B
|
that's pretty slick. How easy is that to do jrgweb?
|
| |
David
|
I got it to work by changing the position to fixed and width to 100%, seems to work fine so far, however i feel like this may be lazy/bad css coding.
Good example there jrgweb, i like what you did there. 
|
| |
David
|
Are you using javascript to make that work jrgweb?
|
| |
jrgweb
|
Hey David,
Yes, the script is located at the bottom of the page.
@Dave B.
It's easy!! The script does the work.
You can download the artx here: Artisteer version 4.1.0.60046
scripts are in the footer. one to automatically insert the id and the other for the toolbar.
css is in the export options/CSS options i artisteer
http://demo.artisteertoday.com/menu_header/headdemo.artx
|
| |
dave
|
Hey jrgweb,
Your example is exactly what I'm trying to achieve! (i.e. http://demo.artisteertoday.com/menu_header/blog.html) but I can't use your artisteer file because I have an older version of the software.
Could you post the CSS so that I can add it to my export options manually?
Thanks so much!
|
| |
Stephan
|
Please help!
This demo works fine if I preview it in a browser from within Artisteer. The moment I export it as a Joomla template and upload it to the site, the template does not fix. If I look at the Temlates ccs and php file, all the code is in tact. Why would that not work. Tried different browsers.
|
| |
jrgweb
|
@Stephan - In joomla you will have to convert the jquery so that it doesn't conflict with mootools.
Change $ to jQuery
I haven't tested this but 99% of the time this works.
|
| |
Stephan
|
Can you please be more specific on where I have to make these cahnges, so I can give it a go
|
| |
jrgweb
|
@Stephan - The script is at the bottom of the page.
I just tested this in joomla 3.1 and it works fine.
<script type="text/javascript">
jQuery(function accept(){ //makes sure your document is ready
jQuery('nav').attr('id', 'headdemo')
})
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var div = jQuery('#headdemo');
var start = jQuery(div).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(div).css('position',((p)>start) ? 'fixed' : 'static');
jQuery(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
|
| |
Stephan
|
Thanks, this code works. I also found that no module should be enabled in the footer, as this seems to interfere with the script.
At least this helped to get the issue sorted. Appreciated!
|
| |
Prince Muzy
|
Anyone have an idea of how i can achieve thesame with wordpress???
|
| |
similar
|
http://www.artisteer.com/?post_id=229538&p=forum_post&topicsPage=4&forum_id=13
|
| |
BreTweb
|
Quote jrgweb:
@Stephan - The script is at the bottom of the page.
I just tested this in joomla 3.1 and it works fine.
<script type="text/javascript">
jQuery(function accept(){ //makes sure your document is ready
jQuery('nav').attr('id', 'headdemo')
})
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var div = jQuery('#headdemo');
var start = jQuery(div).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(div).css('position',((p)>start) ? 'fixed' : 'static');
jQuery(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
Hello Jrgweb ! how are you ?
I'm trying to fix at the top the H menu when scrollin but the menu is going on the left ?!!
Please can you help ?
That's here http://www.beaupre-marine.com/index.php/nous-contacter
|
| |
jrgweb
|
@BreTweb
Add this to the bottom of the template.css file.
#headdemo {width:100%;}
|
| |
wim
|
Hi guys,
Can someone please help? I would most appreciate it.
I've have a test site: http://www.wytest.be/dhv
I would to like to fix the black menu (only nav bar and not the header) at the top of the screen when scrolling. I've tried several things but I can't get it to work.
I wish you guys all the best for 2016
Kr,
Wim
|
| |
James G.
|
@Wim,
First thing you need to do is change the $ to jQuery in your script since your using joomla.
Secondly, create a class in the template.css file.
example:
.fixed {
position:fixed;
width:100%;
top:0;
}
other tweaks may be needed.
|
| |
Wim
|
Hi James,
Thanks for your reply. I'm sorry bit i'm not a JS specialist. Which JS script do I need to use and where do I need to place it?
Only the menu should move to the top.
Thx
|
| |
James G.
|
The script ins in the index.php file. around the menu code.
I assume your trying to do something like this:
http://fixed_nav.houslerwebdesign.com/blog.html
|
| |
wim
|
Yes. Many thanks!
I finally got it to work but my responsive is not working anymore.
Can I copy the JS script in Artisteer - additional HTML
<script type="text/javascript">
jQuery(function accept(){ //makes sure your document is ready
jQuery('nav').attr('id', 'headdemo')
})
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
var div = jQuery('#headdemo');
var start = jQuery(div).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(div).css('position',((p)>start) ? 'fixed' : 'static');
jQuery(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
Also in Artisteer under CSS:
#headdemo {width:100%;}
.fixed {
position:fixed;
width:100%;
top:0;
}
Thanks
Wim
|
| |