I have a main horizontal menu inside a div. I want the dropdown menu to appear left underneath the div button that say "View The Perceptors". Now it just expands the div of the container when the dropdown is visible.
How can I make the dropdown go stay within the div? View the website link:
https://perception.works/
CSS CODE:
.dropdown {
position: absolute;
z-index: 1;
display: flex;
flex-direction: column;
color: white;
padding: 2.4em;
gap: 65px;
/* width: 100%; */
background-color: #181024;
}
You should have mentioned that you are trying to achieve this on responsive mode because otherwise on pc mode it didn't looked so good and I couldn't find where's the dropdown or menu!
Change
.dropdown_menu{
height:auto;
}
and delete position absolute from your .dropdown because you are just making it to appear on top of everything and to not care about other elements.
Also still, your button is not working.
Main problem here is that if you want to have your .dropdown within the div container (.dropdown__menu) there will be some text that does not stay in the .dropdown.
.dropdown__menu {
position: relative;
}
.dropdown {
position: absolute;
z-index: 1;
display: flex;
flex-direction: column;
color: white;
padding: 2.4em;
gap: 65px;
width: 100%;
background-color: #181024;
}
An easy solution to this problem will require a little change to the layout by unsetting the property display: flex; from the .social-links class (basically just remove the class from the CSS file).
Result
The final layout is presented as follows:
More references
Additionally you could try setting the overflow of the text, here a couple links:
How do i make wrapper div correctly wrap divs inside of it?
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Related
I have my heading with arrow ::after element. After element is positioned absolute with margin-left:10px, but when i shrink down website the element wraps with text down.
Is there a way for arrow to always stick to top right of heading no matter what width of device like this?
Tried with display inline but it doesnt work. Any idea if it's possible?
I'd wrap the heading in another element and use the ::after pseudo-element of the parent. In my example, I used a <div> with display: inline;, and set the heading's margin-right to 1em to account for the width of the ::after element. My code probably isn't too different from yours, just uses different selectors.
CodePen here: https://codepen.io/the_Northway/pen/GRMyrLR
Edit: adding the Stack Snippet by suggestion - codepen is still useful to change screen size though.
div {
position: relative;
display: inline;
text-align: center;
}
div h3 {
margin-top: 0;
margin-right: 1em;
}
div::after {
position: absolute;
display: block;
width: 1em;
height: 1em;
content: ">";
color: red;
top: 0;
right: 0;
}
body {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
<div><h3>Looking for help?</h3></div>
i'm working on FCC Technical Documentation Page and i'm having an issue, i'm trying to make this project mobile responsive, but i'm running into an issue where I can't seem to figure out how to move my left fixed nav bar and transition it to a top nav bar that is center aligned at anything below 920px, if you can be of any help I would appreciate it. I will link the project below so anyone can look at the code.
EDIT Finished making the project mobile responsive, might not be the most efficient method but it worked as i'm learning, click the link to view the code to see what I did that worked.
https://codepen.io/ochovj/pen/eYvwmYr
#media screen and (max-width: 920px) {
.nav-ul {
position: relative;
top: 0;
margin: 0;
padding: 0;
text-align: center;
float: none;
}
}
/* End of Responsiveness */
/* Nav Bar Container */
#navbar {
position: fixed;
width: 290px;
height: 100%;
top: 0px;
left: 0px;
border: 2px solid black;
background-color: white;
padding: 50px 0;
}
The easiest way would be to make your navbar list display: flex at the desired breakpoint:
#media screen and (max-width: 920px) {
.nav-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
display: flex alone should do roughly what you want, but flex-wrap: wrap allows multiple rows if your elements don't all fit on a single line and justify-content: center will center the <li> elements inside the <ul> parent.
The list elements will need more styling, like padding, as they'll just be squished in a row together -- but this will quickly fix your position issue.
So I'm using flexbox to create the grid unfortunately, I'm a little stuck as to how to make the divs stack on top of each other. This is what it looks like when I hide overflow:auto and add position relative to the carddiv. I believe the divs are stacking on top but they don't look the right way.
this is what it looks like:
Image Link
https://imgur.com/a/1KsJDh7
What I want it to look like is this:
Except positon:absolute makes everything disappear.
I'm new to css/html so I'm not exactly sure what I'm doing wrong.
https://imgur.com/a/mrLsTdX
App.css
* {
/*overflow:auto*/
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
position: absolute;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
However, without position:absolute it looks like this which is what I want it to look like except it doesn't stack. I assume the first version is stacked which is why it only shows one div?
The code below is for the second image link:
https://imgur.com/a/mrLsTdX
App.css
* {
overflow:auto
}
.App {
/*display: flex;*/
/*flex-wrap: wrap;*/
}
Card.css
.container{
background-color: yellow;
display: flex;
flex-flow: column;
text-align: center;
position: relative;
margin: 10% 10% 10%;
}
.cardDiv {
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50vh;
}
.cardDescription {
background-color: green;
height: 50vh;
}
The cardDivs are being generated through a map function that is inserting the divs.
The html looks like this:
<div className='container'>
<div className="cardDiv">
<div className="cardPicture"></div>
<div className="cardDescription"></div>
</div>
</div>
Does anyone have any idea on what I could do make the divs stack up without disappearing?
I think the issue is the combination of a flex container and flex items that have been set to absolute positioning. When you set position: absolute on .cardDiv it takes all the cardDiv elements out of the flex flow, and without any width or content, the cardDiv's disappear. As an experiment, take your first CSS block and add a width (say, 50px) to .cardDiv. You should see the cards reappear, stacked and taking up 50 pixels horizontally.
When you set a element to display: flex or display: inline-flex, all the direct children of that element become flex items. You can see all the things that does to the children by default here, and the purpose of the various flex properties are there to manipulate how the children will be displayed along the axis you specify. If you set one of these flex-items to absolute positioning, however, it takes that element out of that flex configuration.
If I understand what you want correctly, I'm not sure you need the container to be flex at all. Try taking the flex properties out of the container, setting the cardDivs to position:absolute and setting width and height to conform to how much of the screen you want filled.
.container {
position: relative;
margin: 1rem;
}
.cardDiv {
position: absolute;
width: 100%;
height: 100vh;
}
.cardPicture {
background-color: blue;
height: 50%;
}
.cardDescription {
background-color: green;
height: 50%;
}
Let me know if this is not what you were looking for-- I figure you can adjust it to how you want the cards to appear. But that's them stacked and split 50-50 between picture and description.
I am trying to build a UI with a fixed position left-aligned control panel (realized via flexbox with column direction) where sometimes a submenu is available for a given item in this flexbox. This submenu should be displayed to the left of the parent item. Now what I have this far looks promising:
.fixed-menu {
position: fixed;
z-index: 9999999;
left: 0;
display: flex;
width: 40.5px;
flex-direction: column;
justify-content: start;
align-items: center;
}
.submenu {
height: 40.5px;
position: relative;
left: 41px;
display: flex;
flex-direction: row;
max-width: calc(100vw);
}
http://jsfiddle.net/hf5bts1a/15/
However, the submenu is not working correctly, as for some unexplainable reason two items are NOT displayed in a row, but instead again as columns (see the above fiddle; the lowest "button" has a submenu with 4 additional entries, see in red).
The solution I found was setting min-width:40.5pxon the submenus buttons as well as adding display:flex to the button-groups inside a submenu.
Is there a other way to put an HTML element to the bottom except :
position: absolute;
bottom: 0;
and at the parent element:
position: relative
...or setting the margin so that the element fits exactly at the bottom?
Well, you can also use position: fixed; bottom: 0;, which will stick the element to the bottom of the window. That means it won't even scroll with the rest of the page.
When you use that for a full-width footer or the like (the most likely use case), you'd then need to add a margin to the rest of the page content so that it doesn't get hidden behind (or hide) the footer.
Other than that you're pretty much stuck with the options you mentioned.
Full documentation on the position property can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
You can also use position: fixed
.elem {
position: fixed;
bottom: 0;
}
Or you can use Flex then set your element to align-self: flex-end
e.g.
.container {
height: 150px;
width: 150px;
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
flex-direction: row;
border: 1px solid red;
}
.container div {
-webkit-align-self: flex-end;
align-self: flex-end
}
Fiddle