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
Related
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 a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
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 am having trouble aligning LinkedIn share button on a website. Check the screenshot below -
You can find it live here. The button aligns well on other parts of that page but when it is placed above or below title then it somehow misbehaves.
How can I fix this?
I think this will solve your problem
span.IN-widget > span{
display:block !important;
}
Then clear <br> whick is between them and don't forget to clear element style to display.
In a custom CSS file, add the following:
.IN-widget > span > span {
height: 30px;
}
Make sure the Custom CSS file order is the last.
Output:
Thanks to all those who tried to help! I finally managed to get it aligned.
Solution:
Since the issue occurs only when the buttons are positioned above or below title text so first of all I programatically added a custom class to the LinkedIn button container - btnsx-li-height. Then I applied the below CSS -
.btnsx-li-height .IN-widget {
position: relative;
}
.btnsx-li-height .IN-widget > span > span > span {
position: absolute;
left: -30px;
bottom: -20px;
}
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.