0

Hello im using bootstrap and want to make the menu to be sticky i have uploaded the code so you can see it www.upster.webuda.com i want to be like in the login screen at the begining im using the same code for other files but it doesn't work properly someone know how to fix this ?

Login with these details:
Email: asd@gmail.com
Pass: asd

3
Contributors
7
Replies
43
Views
1 Year
Discussion Span
Last Post by Stefan_1
0

look at the menu its sticking to the bottom when the page is at the end and when you login, the menu in the homepage is not working properly also in the NEWS too but i use the same code.

This is the code for the sidebar and im just using request("navigation.php"); to show the navigation

    body,html{
        height: 100%;
    }

    /* remove outer padding */
    .main .row{
        padding: 0px;
        margin: 0px;
    }

    /*Remove rounded coners*/

    nav.sidebar.navbar {
        border-radius: 0px;
    }

    nav.sidebar, .main{
        -webkit-transition: margin 200ms ease-out;
        -moz-transition: margin 200ms ease-out;
        -o-transition: margin 200ms ease-out;
        transition: margin 200ms ease-out;
    }

    /* Add gap to nav and right windows.*/
    .main{
        padding: 10px 10px 0 10px;
    }

    /* .....NavBar: Icon only with coloring/layout.....*/

    /*small/medium side display*/
    @media (min-width: 768px) {

        /*Allow main to be next to Nav*/
        .main{
            position: absolute;
            width: calc(100% - 40px); /*keeps 100% minus nav size*/
            margin-left: 40px;
            float: right;
        }

        /*lets nav bar to be showed on mouseover*/
        nav.sidebar:target + .main{
            margin-left: 220px;
        }

        /*Center Brand*/
        nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
            margin-left: 0px;
        }
        /*Center Brand*/
        nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
            text-align: center;
            width: 100%;
            margin-left: 0px;
        }

        /*Center Icons*/
        nav.sidebar a{
            padding-right: 13px;
        }

        /*adds border top to first nav box */
        nav.sidebar .navbar-nav > li:first-child{
            border-top: 1px #e5e5e5 solid;
        }

        /*adds border to bottom nav boxes*/
        nav.sidebar .navbar-nav > li{
            border-bottom: 1px #e5e5e5 solid;
        }

        /* Colors/style dropdown box*/
        nav.sidebar .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        /*allows nav box to use 100% width*/
        nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
            padding: 0 0px 0 0px;
        }

        /*colors dropdown box text */
        .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
            color: #777;
        }

        /*gives sidebar width/height*/
        nav.sidebar {
            width: 200px;
            height: 100%;
            margin-left: -160px;
            float: left;
            z-index: 8000;
            margin-bottom: 0px;
        }

        /*give sidebar 100% width;*/
        nav.sidebar li {
            width: 100%;
        }

        /* Move nav to full on mouse over*/
        nav.sidebar:hover{
            margin-left: 0px;
        }
        /*for hiden things when navbar hidden*/
        .forAnimate{
            opacity: 0;
        }
    }

    /* .....NavBar: Fully showing nav bar..... */

    @media (min-width: 1400px) {

        /*Allow main to be next to Nav*/
        .main{
            width: calc(100% - 200px); /*keeps 100% minus nav size*/
            margin-left: 200px;
        }

        /*Show all nav*/
        nav.sidebar{
            margin-left: 0px;
            float: left;
        }
        /*Show hidden items on nav*/
        nav.sidebar .forAnimate{
            opacity: 1;
        }
    }

    nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
        color: #CCC;
        background-color: transparent;
    }

    nav:hover .forAnimate{
        opacity: 1;
    }
    section{
        padding-left: 15px;
    }

    .navbar-header{
        width: 200px !important;
    }

    #bs-sidebar-navbar-collapse-1{
        width: 200px;
    }

Also this JavaScript code which i apply to every file where i use the navigation

$( document ).ready(function() {
            $(window).scroll(function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var viewHeight = document.documentElement.clientHeight || window.innerHeight;
                var navbarHeader = $(".navbar-header");
                var navbarSide = $("#bs-sidebar-navbar-collapse-1");
                var navbarHeight = navbarHeader.height() + navbarSide.height();
                if (navbarHeight < viewHeight) {
                    navbarHeader.css('position', 'fixed');
                    navbarHeader.css('top', '0px');
                    navbarSide.css('position', 'fixed');
                    navbarSide.css('top', navbarHeader.height()+'px');
                    navbarSide.css('bottom', '');
                } else {
                    navbarHeader.css('position', '');
                    navbarHeader.css('top', '');
                    if ((scrollTop + viewHeight) > navbarHeight) {
                        navbarSide.css('position', 'fixed');
                        navbarSide.css('top', '');
                        navbarSide.css('bottom', '0px');
                    } else {
                        navbarSide.css('position', '');
                        navbarSide.css('top', '');
                        navbarSide.css('bottom', '');
                    }
                }
            })
        });

Edited by Stefan_1

0

OK, first thing, the 'more' item disappears after login. So can't logout. I'm assuming that this is due to your PHP code, rather than your CSS etc.

1

Because your modal ID should be different, you are using one modal with one ID(which isn't unique) and that's why is not working.Create more modals with UNIQUE id for each page or action.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.