I'm using the twitter bootstrap fluid css to build a cms(Dotnetnuke) skin. The cms displays a control panel which is fixed to the top of the page when an admin is logged in.
This is how it looks like
<div id="dnnCPWrap"> ... </div>
#dnnCPWrap {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: 1001 !important;
}
The bootstrap fluid's menu looks like this
<div class="navbar-fixed-top"> ... </div>
.navbar-fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
As you can see, they both are fixed to the top of the window and since the fluid menu has a higher z-index, it covers the cms's control panel. Question is, is it possible to have them stack on top of each other with the control panel stacked on top?
Note:The cms's control panel is only displayed when an admin is logged in so users don't see it. Thanks
I think the quick solution is to edit here the css:
#dnnCPWrap {
width: 100%;
position: fixed;
left: 0px;
top: 0px; /*PUT THE HEIGHT OF THE USER NAV MENU */
z-index: 1001 !important;
}
With that solution the admin panel is displayed below the nav menu of the user.
If you want to have the admin menu first, I think that you have to overwrite the css of the user menu when you log as admin and edit top:/*HEIGHT OF ADMIN MENU*/
This is the solution I came up with:
New css class:
.navbar-admin-mode {top: 36px;z-index:1000;}
Javascript:
$(document).ready(function() {
var cp = $("#dnnCPWrap")[0];
if (typeof cp !== "undefined") {
$(".navbar-fixed-top").addClass("navbar-admin-mode");
}
});
Since the admin control panel div(#dnnCPWrap) only exists if the user is logged in as admin, the css class is only added to the skin's menu only for admins.
Sorry, can't comment yet. For Dnn 7.2.x the selector should use #ControlBar_ControlPanel instead of #dnnCPWrap to make it work.
Related
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>
I am using Bootstrap template SB Admin (https://startbootstrap.com/templates/sb-admin/) which has a hide/show side nav using a menu button on click. I want to retain the standard functionality on full screen which defaults to show the side nav unless specifically clicked to close.
On smaller screens/mobile the default behaviour is to hide the side nav unless clicked to open, which is fine however I want the nav to auto-close when clicking outside of the nav div - but only on mobile.
I can't work out how to trigger different behaviour based on breakpoints - any ideas would be greatly appreciated. Thanks.
Are you using the dist files or src files?
If you are using the dist files you can simply add this to your css, no extra jquery or js required.
#media (max-width: 992px) {
.sb-sidenav-toggled #sidebarToggle::before {
content: '';
position: fixed;
display: block;
z-index: 0;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
What this does is when the side nav is set to open, there is a class added to the body tag. .sb-sidenav-toggled.
We are also wrapping this using a css media query to make sure we are only on tablets/mobiles (991px below).
Then on the #sidebarToggle button (when open using this parent body class .sb-sidenav-toggled) is creating a fixed pseudo ::before element (which is transparent) which covers the body area you want to be clickable to close side nav.
The magic is, because this pseudo element parent is the sidebar nav button, it means when it is clicked it triggers the standard close side nav event. And when it closes, the .sb-sidenav-toggled body class is removed, in turn removing the pseudo element.
If you are using scss files in the src folder, then you can use the sass below...
#include media-breakpoint-down(md) {
#sidebarToggle {
.sb-sidenav-toggled & {
&:before {
content: '';
position: fixed;
z-index: 0;
display: block;
top: 0;
left: 225px;
bottom: 0;
right: 0;
}
}
}
}
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
I need android like floating action button at the button of my jsp page.The button should remain at the bottom irrespective of the scrolling. Any options available ?
If your button has id fixedbutton. You can specify this in the CSS as:
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
}
I have done my research and so far I have tried just about everything. I am creating a responsive site with a slide push menu. I'm still learning Java and jQuery so I ended up creating it strictly through CSS coding. In order to do this I used:
#menu-toggle:checked + .menu {
position: absolute;
left: 0;
}
Then I applied the left property to my .menu with a value of -240px. However when I click on the menu button, the navigation bar refuses to show. On top of that it seems that my code editor does not recognize the 'transition' property.
Here's a link to my html and css documents. This is for an academic homework.
I put my responsive.css in the JavaScript bin so that was no mistake.
http://jsbin.com/gerunayapo/1/edit?html,css,js
You do some mistakes like:
You add css in script panel in jsbin.
Then your write this wrong css:
#menu-toggle:checked + .menu {
position: absolute;
left: 0;
}
Change it to:
#menuToggle:checked ~ .menu {
position: absolute;
left: 0;
}
There is menuToggle not menu-toggle. And use ~ instead of +.
Check JS Bin link