The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fixed menu

View previous topic View next topic Go down

Solved Fixed menu

Post by IdaTR on June 16th 2014, 2:46 pm

Hey!

I've tried to make this:
http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/

on:
www.Rosewille.danskforum.net

Version: PHPBB2


The problem is, it just doesn't seem to appear, and I don't really know what I've done since it is like that..

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu

Post by Sir Chivas™ on June 16th 2014, 3:43 pm

Add this into this template: overall_header (ACP >> Display >> Templates >> General >> Overall_header
Code:
<div class="nav-container">
<div class="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">CSS</a></li>
        <li><a href="">PHP</a></li>
        <li><a href="">SEO</a></li>
        <li><a href="">jQuery</a></li>
        <li><a href="">Wordpress</a></li>
        <li><a href="">Services</a></li>
    </ul>
    <div class="clear"></div> /*clear floating div*/
</div>
</div>

Add this into your CSS: ACP >> Display >> Colors >> CSS [tab]
Code:
.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
   
.nav { height: 42px;}
    .nav ul { list-style: none; }
    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
    .nav ul li:first-child{ padding-left: 0;}
    .nav ul li a { }
    .nav ul li a:hover{ text-decoration: underline;}

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new one and tick it in all pages.
Code:
jQuery("document").ready(function($){
   
    var nav = $('.nav-container');
   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Fixed menu

Post by IdaTR on June 16th 2014, 6:37 pm

solved thx Very Happy!
Edit: Before i solve this, is it possible to have these buttons in the menu as on my own page:
www.nionevrien.forumq.net

Edit edit: forget what was written earlier.. i've found a better fixed menu, that i would like to have, since it suits my needs more: http://www.mvpthemes.com/maxmag/

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu

Post by Sir Chivas™ on June 19th 2014, 9:25 pm

Is this solved?

Are you trying to have a drop-down menu?

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Fixed menu

Post by IdaTR on June 22nd 2014, 4:30 pm

its solved

IdaTR
Forumember

Female Posts : 339
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu

Post by SLGray on June 22nd 2014, 5:10 pm

Topic Solved & Archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35666
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum