I recently designed a one-page website for myself using the latest Concrete5. My site uses a dynamic sticky nav which later turns into a fixed nav to the top when I scroll down. The tool bar covers the fixed nav and I cannot see it again until I scroll back to the top.
What I am interested in is this. Is there a way to have the wrapper class that C5 needs for editing to behave like an iFrame from days gone by. The effect that I am looking for is that everything under the toolbar be the website and still be editable.
When the concrete5 toolbar is visible, the html element in your HTML will have the ccm-toolbar-visible class.
With this class, you can change your navigation behavior based on the toolbar visibility. A common approach is to set the navigation position from fixed to static when the toolbar is visible.
Additional information on this topic can be found here:
https://www.concrete5.org/community/forums/customizing_c5/theme-fixed-header-in-admin-mode/#860110
https://www.concrete5.org/community/forums/customizing_c5/trying-to-make-a-header-stationary/#762608
Related
ETA: I was brought in to help with one little bit of this site. I am not the designer, so I had to ask permission to share the site and get a staging site set up. I can now provide the link....
https://staging3.childsfirststeps.com/
I have stripped all the z-index/overflow instances I had been working with so it's a relatively clean slate.
In a nutshell, I need the Home page slider frame to overlap the nav items as per the image attached below. ON the other pages, I need the page header (title bar) to overlap the nav items. All this, while preserving the dropdown menu.
A client has requested (despite all objections on our part) to do this nav design based on a static design (image) she found somewhere. I thought it was technically doable so I set out to recreate it. I managed to figure it out but ran into a snag when a dropdown menu item was added: the z-index on the dropdown item is not behaving.
I have positioned all related items and stacked the z-index as I would expect. Everything works properly except the dropdpown menu items which currently sit behind the page header.
The menu items are all transformed (rotated) and translate on hover. The page header (title bar) needs to be stacked higher than the nav to cover the bottom bits of the rotated menu items.
The HTML is of course rather convoluted as the site designer is using WordPress and Elementor so moving containers around is not possible.
I have tried every z-index and overflow setting on everything I can think of.
Is this design achievable with a dropdown menu item?
main nav image
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
I created a content script Chrome extension toolbar by following #RobW's answer to this question.
I'm now trying to get certain elements to overlay on the rest of the page, but currently they are only showing within the iframe.
For instance, an icon is clicked and shows a notification panel/tooltip. As you can see, it is cut off by the edge of the iframe:
Is there a way to change the CSS of the panel to hover on top of the rest of the page despite being in a separate iframe?
BTW, I made the height of the toolbar 143px, instead of the 43px you might expect of a toolbar, just so the issue would be more apparent.
No, I'm fairly sure you can't do that with an iframe-based approach. That beats the purpose of iframe content isolation - imagine the clickjacking possibilites!
You will need to inject your UI into the document itself.
You probably went with an iframe-based approach because of possible clashes with the page's own CSS, for example. Thankfully, there's a modern tool to help with this - Shadow DOM.
I am trying to make a similar offcanvas element in one of my projects. I found few examples, but since I am using bootstrap 3 I went on with this one: http://getbootstrap.com/examples/offcanvas/ I replicate it in my project, but instead of the toggle button on mobile I use Hammer.js like this:
Hammer("body").on("hold", function() {
$(".row-offcanvas").toggleClass("active");
});
The tricky part is that whenever my content inside the visible div, is shorter than the div containing the list of links (on the right) the page is scrolling. Once I add more content to the visible div, I do not get any scrolling and everything works as it should. I made a simple example here http://florin-cosmin.dk/offcanvas/index1.html , but it can only be tested on mobile, if you really want to see the scrolling (just HOLD not click anywhere in the body). The working example is here: http://florin-cosmin.dk/offcanvas/itworks.html
I tried to set overflow-x: hidden on the visible div, but that doesn't help.
Again, how can I remove scrolling on mobile even when the content on the left is shorter than the one on the right side?
It is very frustrating. Please help :)
UPDATE: I am testing it on default Android browser on 4.3 and 4.1.2. I need to use the default browser as my Android app uses a webview.