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
What code have you posted? All I see is the site and an annoying popup for hosting.
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', '');
}
}
})
});
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.
Did you tried in NEWS ?
anyone ?
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.
How can i do that im really new in CSS can you help me ?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.