Make dropdown menu appear outside of navigation div - html

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;
}

Related

How to stop flex-box from pushing other elements out of the container?

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

NavBar Custom Height with Search Bar on Right Side

I'm having a difficult time getting a NavBar to render what I have in mind.
I need a navbar with an increased height (reason because my brand image has a bigger height than the default).
But I also need all menu elements (BUTTON, LI, A, FORM ELEMENTS, NAVBAR-TEXT, NAVBAR-RIGHT) to respect the new height and to properly vertically center in the navbar.
Can someone provide some example HTML/CSS for what needs to be changed?
I have done lots of searching online and there seems to be nothing obvious.
The BootStrap site shows documentation on how to define a navbar, but nothing that I could find regarding height changes.
If you are putting your brand image within the navbar-brand div then you can change the height to the height you need (or height of the brand image) using css:
.navbar-brand {
height: 80px;
}
To align the navbar elements vertically you can give the navbar a top margin to what you need also using css:
.navbar-nav {
margin-top: 40px;
}
You will have to use css breakpoints if these need to be changed for smaller devices.

Set width:100% relative to another object for an object that needs to be fixed

Code: https://jsfiddle.net/gsnfzn35/3/
It's a bit funky to describe, click the toggle drawer button. A pull out drawer on the right shows up. That pull out drawer is one container, but has 2 key components. The first component is all the content at the top. The last component is a "fixed row" on the bottom:
<div class="scroll-fixed-row" style="width:100%;text-align: right">
<p>
FIXED FINAL ROW
</p>
</div>
This row SHOULD be the width of the pull out drawer, whatever that width is; NOT the width of the screen. Currently though, if you inspect element with the width:100%, you see that the width is the width of the screen, not the pull out drawer. Another way to see this is in the fact that when there's width:100%;text-align:right, the text is off screen, pulled to the right of the row that is too wide. Remove the width:100% and you can see the text again.
I'm guessing this is due to the fact that the scroll-fixed-row is fixed, and therefore, its taking width from the screen, not the pull out drawer itself. But this fixed is necessary, because that scroll-fixed-row needs to stay at the bottom even though the rest of the pull out drawer scrolls. Given that constraint, how can I set the width of the scroll-fixed-row to be the width of the pull out drawer, for any screen (full responsiveness) WITHOUT having to provide specific width in pixels based on media queries?
The reason I'm asking this is because I would like to divide the scroll-fixed-row into 2 "sections" using either a table and 2 <td width="50%"> or using Bootstrap grid and 2 <div class="col-xs-6"> in a row. In the current implementation (NOT in the Fiddle), the content in the 2nd grid just gets pushed off page (same issue now) because the table width is inheriting from the screen. I think I can figure that part out if someone can help me answer this question.
The width can be solved by using inherit instead of 100%, this will make a fixed element get the width of its parent, in your case .container.scroll. I noticed that you have padding added to parent, the inherited width will include paddings and so the fixed element will overlay the scrollbars.
Code:
.scroll-fixed-row {
position: fixed;
text-align: right;
background-color: white;
border-top: 1px solid black;
width: inherit; /* get width from parent */
bottom: 0; /* stick to bottom */
right: 0; /* fix offset caused by padding */
}
Another thing I noticed that in your code is that you are using margin-top: 70px on .scroll to offset it from the fixed red nav, this causes the the bottom part that is out of viewport to be invisible, especially the bottom scroll arrow. I've changed it to the following:
.scroll {
position: fixed;
top: 70px; /* offset from top (nav height) */
height: calc(100% - 70px); /* calculate height minus the top offset */
}
If you wanted to prevent the fixed element from overlapping the scrollbars, you could apply pointer-events: none and add another wrapper in the HTML that gets a 15px spacing like the content, for better consistency:
.scroll-fixed-row {
...
pointer-events:none; /* disables mouse functionality to enable scrollbar control */
}
.scroll-fixed-row .inner {
border-top:2px solid red;
background:lightblue;
margin:0 30px 0 15px;
pointer-events:auto; /* allows mouse functionality */
}
jsFiddle demo - scrollbar overlap: https://jsfiddle.net/azizn/guufj4a0/
jsFiddle demo - additional wrapper: https://jsfiddle.net/azizn/d6wwk51b/

Bootstrap vertical Navigation menu - height on all page?

I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.

Css accordion menu, how to set height to automatic?

I've got this accordion menu:
Codepen link
The problem is that the height of the expanding divs is "hardcoded" (see where the css comment is), whereas I need it to expand according to the number of submenu items.
Any ideas how to fix this?
Use height: auto
#accordion div:hover {
height:auto; /* THIS NEEDS TO ADJUST AUTOMATICALLY */
}