Here's what happens when unfixed and it's the behaviour I want but I want navbar to be fixed
Here's what happens when fixed: it doesn't move the content (it is behind this dropdown)
// scss for the nav
.filterbar {
position: fixed;
top: 0;
box-shadow: 0 0 15px black;
width: 100%;
// for info section
.filters-info {
margin-top: 110px;
display: flex;
justify-content: space-between;
}
How to fix this? (margin-bottom didn't help). I have two ideas: 1. to get toggleFilterbar prop and to change the styling based on this 2. to make the nav position absolute and then to change it to fixed. However, I guess there must be a simplier css way to fix this
Give position:relative; to .filters-info
and
Replace margin-top: 110px; to top: 110px;
Related
My current website is this https://resillience.in
It is completely responsive below 1440px and works fine
But it looks wierd when viewed at 2560px as shown below
Don't want to change the things also in % to make it responsive at 2560px
How to fix the view at 1440px and have a work around like shown below
If viewed at higher, it adds padding from both sides.
Also adding max-width:1440px in the main html css file, I cannot achieve the desired result
The following code also might not solve
#root {
max-width: 1400px;
margin: 0 auto;
}
Because some of the images are having its css property as
position: fixed;
right: 0;
In general,you can apply this CSS to your #root element:
#root {
max-width: 1400px;
margin: 0 auto;
}
This will limit the overall width at 1400px and center it horizontally when the window is wider than 1400px.
I don't know if there are any details in other pages of your website which would cause a problem in conjunction with those settings (I don't see any at first sight), but this would be an easy, general procedure to get what you are asking for.
add justify-content: flex-end; to right side menu and I had changed some CSS to look beautiful. Please go through this.
.jss6 {
justify-content: flex-end;
}
.jss7, .jss18 {
margin: 0 10px; /* to add space between a tag and dropdown */
}
.active {
border: none;
}
.active::before {
position: absolute;
height: 6px;
width: 100%;
background: #3672c0;
content: '';
left: 0;
bottom: -3px;
}
try do the following:
#root {
width: 100%;
}
#media (min-width: 1440px) {
#root {
width: 1440px;
margin: 0 auto; // for centering
}
}
setting the width to fixed-size might solve the issue, from my quick review, why? cuz u probably used width: 100% inside the root div, so setting the root div to fixed-size always be related to that 100% = 1440px; :) let me know
I am trying to get a square to have a limited size and stay within the bounds of the parent div and scale cleanly. I can get one or two of these, but not all.
Setup is I have a main div, two column divs on the left, and a div that takes up the remaining space on the right. I would like the div on the right to contain the square and the bounds of the square stay within the parent div. I can get it to stay put if I don't use the padding-bottom to keep it square, but then the pic of the item looks horrible.
Take a look at my js bin. The pathway to hit the square is:
Weapons -> item b1 -> click on it to make it stay
The padding-bottom pushes it way down and outside of the parent div and blows the bottom out of the whole thing.
css
.itempanel{
display: block;
align-items: center;
position: relative;
}
.itemcontainer{
position: relative;
top: 30%;
height: 60%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.itemdisplay{
display:none;
flex-direction: column;
width: 60%;
padding-bottom: 60%;
margin-left: auto;
margin-right: auto;
position: relative;
align-items: center;
overflow: hidden;
}
/* .itemdisplay::after{
content: " ";
display: block;
padding-bottom: 100%;
} */
html
<div class="itempanel">
<div class = "itemcontainer">
<div id="itemdisplay" class="itemdisplay">
<img id="itemimg" class="itemimg" src=""></img>
<div id="itemdesc" class="itemdesc">
<div id="itemtitle" class="itemtitle"></div>
<div id="itembody" class="itembody"></div>
<a id="itemclick" class="itemclick" href="">Click To Place Order</a>
</div>
</div>
</div>
</div>
Thanks for any help!
*little bit of background - girlfriend wants a skyrim wedding so building out a website for rsvp and stuff. Belethor's shop is going to be setup to help those not so nerdy shop for cheap cosplay outfits. Everything else works just like I want it, but the itempanel/itemcontainer/itemdisplay is not in the display area how I want it.
figured it out. The psuedo element has to be opposite what padding you are using. For instance, using this worked like I expected it to. it's always the simple things...
.itemdisplay::after{
content: " ";
display: block;
padding-top: 100%;
I see that you have created a class .bottommenu but I don't see it being applied anywhere on your HTML or JavaScript. If you want to display two rows using Flex-box and you are not quite sure of the height of your images or content, you could set that parent container to have a height: auto and on your child container you could use the align-self: flex-end to handle the positioning of items, and on your parent use the justify-content or align-content to your liking. Something like this:
div .parent {
display:flex;
height: auto;
min-width: 300px;
}
div .child {
align-self: center;
width: 100%;
min-height: 50%;
height: auto;
margin: 0 auto;
}
Hope that helps.
My hidden nav, which should stay under the main section, spills out when scrolling further down the page.
I have set my main section to min-height: 100vh with a background color and a z-index so I don't understand why this is still spilling out.
nav {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
background-color: #ff5000;
color: #fbf9f9;
font-family: "Anx Regular";
font-size: 28px;
display: flex;
flex-direction: column;
justify-content: center;
}
main {
position: relative;
z-index: 1;
background-color: #fbf9f9;
min-height: 100vh;
transition: transform 0.8s;
}
main.open {
transform: translate(-300px, 0);
}
const toggleTag = document.querySelector("a.toggle-nav")
const mainTag = document.querySelector("main")
toggleTag.addEventListener("click", function() {
mainTag.classList.toggle("open")
if (mainTag.classList.contains("open")) {
toggleTag.innerHTML = `<img src="close.svg">`
toggleTag.style.width = "30px"
} else {
toggleTag.innerHTML = `<img src="menu.svg">`
toggleTag.style.width = "30px"
}
https://anx.superhi.com/workshops.html
It's because of the <section class="crit1"> tag in <main> that has the css height: 100vh. This appears to be shortening that section. I don't know where else this is used, but just removing that rule fixes it. You could probably also do something more specific like section.crit1, section.crit1 section { height: auto; } if that rule is important elsewhere.
100vh means the full height of the window where it is displaying (say 800px, for example) so it's not what you need yo solve your problem. You set a position: fixed to the nav so it's always in the upper right corner of the screen even if you scroll down. If you need it to show just when you are at the top of the page, try switching to position absolute.
I had the same problem doing a task for freecodecamp.
I put both nav and main positions to absolute in CSS.
It stopped the overflow. Dunno if it will create problems down the road though.
I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?
Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;
This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}
Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}
I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">