i have a small problem with my side nav bar in ltr i made it responsive by adding a button to toggle and un toggle it and also i used media query to hide it if it is under 700px and only show the toggle button so that the user could press it and then the side nav will appear so that he could navigate and its style is the same as if it is more than 700 px keep in mind that i want it to be with its same style i don't want to converte it into top nav or smthg after that is explained this is the noraml view at more than 700px
but when i resize my window to be less than the full window scree of the desktop it looks like this
in en version it still has the same width and all but in ar version as you can see it looks like this and the reason why this is happening is because of the poistioning in css the ltr version is by default poistioned to the left but in rtl it should be manually poistioned
my css is too long so that i will only share the poistioning part if you want me to share it all it is ok but it might waste your time because as i said before its too long
ar positioning css
.page-wrapper.toggled .sidebar-wrapper {
left:80%;
}
en
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
working (expected resault but this one is on the left side i want it to be at the right side)
https://jsfiddle.net/r52nhfb4/2/
have the poistioning problem
https://jsfiddle.net/r52nhfb4/1/
keep in mind that i am using laravel so all the weird text and stuff are laravel syntax
just change the below given css:
.sidebar-wrapper
{ width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
right: -300px; /*change this */
z-index: 999;
}
.page-wrapper.toggled .sidebar-wrapper
{
right:0; /*change this */
}
check out my answer:https://jsfiddle.net/zLy8xhfb/
Related
REQUIREMENT :
I have an action bar with button called Next Scale, which is of position: sticky and bottom: 0 in mobile view.
I want this HTML element to stick to the bottom of the viewport as we scroll and stays to the bottom when it is out of view.
PROBLEM :
In the given GIF image below, the actions bar and the Next scale button goes hidden below the mobile navigation pane, while the same sticky feature requirement works as expected in desktop.
If i scroll to the end of the page and scroll back above, the actions bar work as expected and stays sticky above the navigation pane. But when i reach to the top, it gets hidden again.
QUESTION :
How to make sure the sticky element's bottom calculation starts above the mobile navigation pane, so that the element is always visible ?
If this is the default behaviour in mobile, then how to solve this ?
CODEPEN LINK : ( Please open the "full page view link" in mobile to reproduce issue )
STICKY html issue codepen link ( full page view )
DEMO HD YOUTUBE LINK :
Youtube video link
DEMO :
UPDATE (8/7/22):
Found out that this issue is due to dynamic viewport height changes in mobile browsers ( Ref: https://stackoverflow.com/a/72245072/4894872 ).
Along with the layout styles that i have used in the code. The layout component styles are given below :
.layout {
display: block;
position: relative;
height: 100vh;
width: 100vw;
min-height: 100%;
overflow-x: hidden;
}
Based on CANIUSE, the new viewport unit options like dvh,lvh,svh are currently available only for firefox and safari. (At the time of writing this update. ( Ref: https://caniuse.com/viewport-unit-variants , FIREFOX DEMO: https://youtube.com/shorts/y-q2V3Ps0VQ?feature=share , CHROME DEMO: https://youtube.com/shorts/V2gkdwtbDh8?feature=share )
The closest recreation of the original code is available in this codepen (NOTE: Please open in mobile browsers like Chrome / firefox / edge )-> https://codepen.io/sparkeplug/pen/WNzwerE ( View in DEBUG MODE ).
CODEPEN DEMO VIDEO IN MOBILE: https://youtube.com/shorts/wTrPIruyERs?feature=share
In the above codepen demo, the safe-area-inset values using env() in css doesn't fix the issue.
Recap of the original issue in mobile devices video : https://youtube.com/shorts/lIEfHgYkSjQ?feature=share
QUESTION UPDATED :
How to fix the sticky elements with bottom: 0 not getting obscured by devices navbar due to dynamic viewport height changes, Without using the new viewport unit dvh ?
The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined. By positioning fixed elements using env() you can ensure that they display in a safe area of the viewport.
.sticky {
...
bottom: env(safe-area-inset-bottom);
...
}
https://developer.mozilla.org/en-US/docs/Web/CSS/env
codepen example : https://codepen.io/aimt/pen/LYdGroR
ensure that you run it in debug mode in your mobile browser:
In your CSS add replace the .sec from this:
.sec {
display: block;
position:relative;
height: auto;
width: 100%;
}
to this:
.sec {
display: flex;
flex-direction:column;
position:relative;
}
What this will do is simply prevent the content from going out of the viewport.
As a workaround, setting the top most layout component position to fixed solves the problem.
.layout {
display: block;
position: fixed;
height: 100vh;
width: 100vw;
max-height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
}
working codepen ( open in mobile browser - Debug mode ):
https://codepen.io/sparkeplug/pen/WNzwerE
As you do not have any code shown down here I can give my opinion.
Check the script if you have it.
Check the style of the nav bar (Major) because if it is staying on block which is its parent it will be hidden if you give to it z-index: 999;
Check the position of the element(Major) as I think it is or relative or absolute. Take it out of the parent element and put it into body without parent div(block).
let major = document.querySelector('.element')
window.querySelector('scroll', function() {
console.log(scrollY)
if(scrollY === 500px) {
major.style.position = 'fixed'
major.style.zIndex = '999'
} else {
major.style.position {
major.style.position = 'static'
major.style.zIndex = '1'
}
})
h1 {
color: black;
font-size: 24px;
font-family: 'Roboto';
width: 100%;
text-align: center;
color: #fff;
padding: 10px 0;
//position: fixed; Use after reaching the exact y number in console
//top: 0;
}
.nav-container {
width: 100%;
margin: 0 auto;
background: gray;
}
.nav {
height: 5000px;
background: green;
}
<nav class="nav">
<br>
<br>
<br>
<br>
<br>
<div class="nav-container">
<h1 class="element">Major</h1>
</div>
</nav>
I have a nav that I want to turn into a modal using a CSS class toggled by javascript. The thing is, because it's a complex layout I can't change the HTML structure I have currently, since this is only for mobiles using mediaquery.
The idea is that the nav looks a certain way (i.e, without the modal class applied) but I will integrate a button which applies the class "modal" to the nav tag, to make the nav tag into a modal box which covers the whole screen.
Here is my code showing how it will look with the nav with the modal class applied: https://jsfiddle.net/spadez/fxnzdofh/3/.
Here is my question / issue. Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen, and not instead under the green header bar. The end result is the entire screen blue from corner to corner.
This is the code I tried but didn't give me the result I wanted:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
}
Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen?
You forgot to add top and left to position it from the top:
.modal {
position: absolute;
width: 100%;
height: 100%;
background-color: blue;
z-index: 1;
top: 0;
left: 0;
}
Fiddle: https://jsfiddle.net/mfjsomca/
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
So i have a navbar on the left of my website it works fine, but it wont "push" the footer like normal data does
#navbar {
float:left;
width: 181px;
position: fixed;
height: 100%;
}
#footer {
border-top:2px solid #a1a1a1;
position:absolute;
bottom:0;
width:100%;
color:white;
height:60px; /* Height of the footer */
background-color: #101010;
}
this is the css, you can see a "working" version at:
version - no data
version - with data
with the second link you will notice how the main content pushes the data, but on the first one if you have a small screen or make the window small it wont show all of the nav bar, is there a way to fix this?
i believe i have covered everything
If I understand your issue correctly, when the page is resized vertically you want the footer to stop when it reaches the navbar.
One possible solution is to modify .navbar css like below:
#navbar {
// remove these styles
// float: left;
// position: fixed;
// height: 100%;
width: 181px; // keep this
}
To get the footer to rest at the bottom of the nav, you need to get the .navbar back into the document flow, float: and position: fixed take it out of the document flow.
You still may want to make this float:left for part of your design, in which case you'll need something else to extend down to stop the footer (probably something in the content section).