I have a problem with a menu on the following media query:
#media all and (min-device-width: 481px) {
.flexnav-show {
margin-top: 0px !important; } }
on line 633 in my style sheet.
When the menu folds down, the div #sidebar (line 426)is still visible under the menu. The #sidebar div should be behind the menu as is the #article div, both #article and #sidebar are contained in the #content div. But the #sidebar div is only one of those two whose position is set to fixed.
What should I alter to set the #sidebar div be beyond the menu and still have its position to be fixed? Could this be a z-index issue? This is the website link.
Thanks
-Sohail
Elements having position:fixed has a higher stacking context than static elements, which is why the sidebar is displayed over the menu. reducing the z-index of the fixed element's container seems to fix the issue
What No One Told You About Z-Index will be worth a read.
The z-index problem is further up the hierarchy, you need to put a high z-index on the #headerWrapper element.
Not too high as I imagine you'll want modal windows to still sit above the header but probably not much else.
Related
It's a bit hard to explain, but consider a flex header with a menu and then something else on the right which is fixed width. As the window size shrinks in width, there is less room for the menu. Eventually, the menu pushes the other thing out of the container.
Working example here.
Bad
Note how the "other thing" falls out to the right.
Adding overflow: hidden to the menu container element makes it so the "other thing" doesn't get pushed. However, this also prevents the drop-down menu from showing, of course. I tried to work around it by setting overflow-x: hidden; overflow-y: visible but this is apparently not a valid setting.
Better, but no drop-down menu
(Ignore that "Item 1" has been hidden. In the real code "Item 5" would have been moved to an overflow menu -- not included in the demo here.)
Question
How can I make it work like the bottom example, but without adding overflow: hidden to the menu? That is, how can I stop flex-box from pushing the "other thing" out to the right?
TL;DR. See the CodePen example linked at the bottom.
Limited spaces + multiple elements = unavoidably overflowing content
Your .logo takes up 50px and the .other-thing takes up 200px. Because you didn't set flex-wrap to the .menu, its width won't go smaller than the content. That means, as the viewport width shrinks, your .header will inevitably overflow.
Setting your .menu with overflow: hidden; wouldn't work in your favor either. Once your Item 1 and Item 5 are cropped out, your users won't be able to scroll to them because overflow: hidden; prohibits it.
flex-wrap: wrap; and #media for better responsiveness
Adding flex-wrap to the .menu would be a good start. That way, in small viewports, the .menu will flexibly wrap as needed. Also, to accommodate a wrapping behavior, I'd suggested you remove explicit height from .header and use padding for consistency.
Using #media for responsive layout will be a better long-term solution for you. Here I suggested resizing the .logo and .other-thing on smaller viewport as an example. In real life, you'd probably want to introduce a mobile-only menu UI (e.g. hamburger button) rather than keeping all menu items visible. Say, in a smaller screen (< 640px), showing 50px logo and 200px other thing with all those individual menu items simply won't work elegantly.
See this CodePen example here
Use example 2 and remove the overflow-hidden class. Add min-width: 0; to menu to fix overflow issues. Then set dropdown-menu to display: none;. I added a class called item-4 to your first child of menu. Then you can use the following CSS to show dropdown-menu.
.dropdown-menu {
display: none;
}
.dropdown > div.item-4:hover ~ .dropdown-menu {
display: block;
}
Fiddle
I'm making a basic website with a dropdown menu for switching languages. I can't seem to make the dropdown appear outside of the navigation div even after trying with overflow: visible !important; as suggested in other threads. Instead my dropdown menu appears inside the navigation bar as shown below:
The codepen for this example is https://codepen.io/mattiasjohnson/pen/VwbZbVm
Solution (edit):
As per s.kuznetsov's comment adding position: absolute to .lang-switch-hidden solved the problem.
Problem
Hi. That behavior of your navigation div is because you don't set its height propriety with a precise value. By default, height's value is auto. Because of that, when the .lang-switch-menu's height grows, the navigation div' height grows to avoid overflow. If you set the navigation div's height in a precise value like 2rem, you can see that it won't grow anymore.
Solutions
Set the navigation div's height precise :
#navbar {
color: black;
background-color: #f1f1f1;
margin-top: 1.5em;
height: 2rem ;
}
NB : By precise value I mean a value who don't tell the navigator to calculate its height according to his content like : fit-content or auto.
2.This code, add at the end of your css, can give you another way to solve the problem.
.lang-switch-menu{
position:relative;
}
.lang-switch-hidden{
position:absolute;
}
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
I am having an issue getting my fixed position navigation menu to overlap my text, a example of this is: http://www.saveur.com/michel-roux-scrambled-eggs-with-asparagus-and-crab-recipe
With the code I have currently managed the fixed position navigation appears behind the text, but I want it to be at the top and overlapping at all times, just like the website above.
All of the content is fixed position, I have made this so that if any one could help me they could just edit the code easier.
HTML: http://pastebin.com/j7jHjb4h
CSS: http://pastebin.com/sWuLChut
How can I make it so that the navigation menu stays at the top even when scrolling down just like the website above.
Just add a z-index value to the fixed element:
z-index:100;
If larger than any other z-index on the same level, it will overlap everything as needed.
#navMenu {
margin:0;
width:200px;
height: 1px;
z-index: 1000;
}
You could try to give it a high z-index
Please don't tear me a new one because this question has been asked before, but their solutions are not working.
Question: How can I prevent two floating div's from wrapping?
Here is my webpage: Defining Voice Page
At the top I have two div's, one for the logo (float-left) and one for the site nav. (float-right). The parent div has a fixed width of 930px. What I want is for the left and right div's to appear inline on opposite sides of the 930px with and remain fixed in place when the window size changes.
The problem: when you resize the window the nav. panel moves and folds/wraps.
I've tried:
1) Setting the parent div to a fixed width (930px).
2) Setting the right and left div's as 'inline'.
3) Setting the right and left div's width to 50%.
...none of those works to fix the location of these div's.
Can someone tell me the right combination of the above or is there something else going on here?
Thanks in advance,
John
Add min-width and change the display property when it reach on 850px size. At present it is like this.
header .float-left, header .float-right
{
float:none;
}
Solution 1: If you want to keep the float:none property Use like below.
#media only screen and (max-width: 850px){
header .float-left, header .float-right
{
float:none;
min-width:425px;
display:table-cell;
}
}
Solution 2: If there is NO problem to remove this float then just remove it like below.
#media only screen and (max-width: 850px){
header .float-left, header .float-right
{
}
}