I have 0 knowledge about css so this might be very simple for you folks. I am trying to change ionic side menu animation from slide in to slide over. Basically, when user clicks on the side menu, content should not move and side menu should be on top of it. Reason I am trying to achieve this is because i have a cordova google map plugin which will not move when side menu pushes the content and there it looks really ugly.
Any suggestion/solution
I suggest to made your own menu.
Basically you make a div with an absolute position and toggle it.
I made a simple jsfiddle so you can try this. jsfiddle
.mySide{position: absolute; left: 0; width: 40%; z-index: 100;}
Hope it helps.
Related
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
I am trying to create an off-canvas menu with foundation 6 like it's done in the official site.
When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen.
.title-bar {
position: fixed;
width: 100%;
bottom: 0;
}
But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed.
Anyone had this problem and solved it yet?
There are a few changes to be made.
The <div class="content"> should be mentioned inside the <div class="off-canvas-content">. Off-canvas is designed to work with contents written inside its off-canvas-content class.
The <div class="off-canvas-content"> should be pushed to use the complete vertical height. You can mention, height:100vh; although, beware of the browser compatibility.
The <div class="off-canvas position-left"> gets another class is-open added to it, whenever the menu icon is toggled. Like point 2, this should also be pushed to use the entire vertical height.
Here is a working example for your reference.
Note:
If you feel the transition is a bit odd, install motion-ui and apply some transition.
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
I have my main nav fixed on the bottom of my page and want the navbar to animate up when clicked on instead of animate down. Can someone please help me out with this or send me in the right direction? it is not a dropdown menu i know how to make the dropdown menu drop up. when the width is a certain size it turns into a dropdown menu and i would like for it to animate to the top when clicked on instead of the bottom.
any help would be great thank you.
Is this what you looking for?
old bootstrap 2.3.0:
http://jsfiddle.net/zalog/Apx5N/77/
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
latest bootstrap 3.2.0:
http://jsfiddle.net/zalog/xC7a5/
In the latest version of bootstrap, this is the default functionality.
I have a p:tieredMenu under which is a p:subMenu which is loaded with a list of p:menuItem. I have the tiered menu on the right corner of the page, so when the sub menu opens, it opens on the right side and moves out of the page.
Please let me know if there is any way to make the sub menu appear on the left side.
I had a look at a similar question How to make twitter bootstrap submenu to open on the left side?, but do not know how to implement that with respect to Primefaces/JSF.
This property will get the menu blocks to appear on the left side.But this will cause all the menus to be on the left side.
.ui-menu-child {
left: -200px !important;
}
You would need to play around a bit to get exactly what you need.
PrimeNG 11
#yourMenuId .p-submenu-list {
right: 100%;
left: unset;
}