overflow-x: hidden; overflow-x: clip !important; overflow-x: hidden !important;
I am trying to use this but it seems to not work no matter where I put it, I want to add it mainly for the header section when I am using the query for anything less then 650px wide. however when I do that and go to the section it don't show an arrow but still lets you slide over to the right . I am going to show you the css that my code is rendering versus breaking down the sections of scss. If I have to I will show you how I am using sass to work with this maybe it is that.
29 Replies
this is just for the < 650
here is the other stuff not in query
.show {
display: block;
}
@keyframes upanddown {
0% {
transform: rotateZ(6deg);
}
50% {
transform: rotateZ(-6deg);
}
100% {
transform: rotateZ(6deg);
}
}
@keyframes wave {
from {
background-position-x: 0;
}
to {
background-position-x: 600px;
}
}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Pirata One", cursive;
background: center/cover fixed no-repeat url("../images/bgfish.webp");
width: 100%;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
It may be simpler if you put all this CSS, along with the corresponding HTML, in a codepen (or similar). That way somebody might be able to help you rather than having to spend time trying to work out what your HTML might look like and what might be causing the issue.
that makes a lot of sense LOL I will do that now 🙂
https://codepen.io/althepal78/pen/JjQPWex
I don't know why it seems like it is working lol
You are getting a horizontal (x) scroll due to the "hidden" nav menu - is that what you are reffering to?
yes
I am getting that however, it seems to work when in codepen lol
not in codepen I get this
Fishing With Dummies
I, ALTHEPAL78, am relearning how to fish after many years. I used to fish with my father but haven't done so since childhood. Starting from scratch, I've been learning from various online channels, though none are local to Spring Hill, Florida. I'll be fishing around Clearwater, possibly Saint Petersburg, and Tampa. My boat is an old cruiser, no...
this is the actual site
Why are you toggling (via JavaScript) the overflow on the body?
As you currently have it you are setting the overflow to "auto" when the menu is outside of the viewport which is allowing the scroll - if anything it should be the other way round. But really you shouldn't need to toggle this.
?
let me check my js I thought I took that out
oh it is for the scroll-y don't work. When I click on the hamburger menu to open it, I don't want people to be able so scroll in the y
should I be changing that to scroll-y: none I don't even know if that is a thing lol
ok, then you should set it specfically to overflow-y: hidden and define overflow-x: hidden on the body in the CSS.
I am not overly convinced by this method in general but lets at least try to get what you have working.
Rather than postion: absolute, you might want to try postion: fixed - that would allow the vertical scroll but your nav would remain fixed on top of the content.
I am confused as to what you are saying. I have to think about it again
First thing to try is to set overflow-x: hidden on the body selector in the CSS.
Then, in your JS code, change the toggle that you have to only toggle overflow-y
Ignore what I said about using position fixed for now.
okay I will do that now
I will delete all the js that changes this
SO on the the body selector did not work
I just adding that overlowy = hidden it seems to be working but for some reason it is not the ov -x is not so annoying
You haven't updated the live site, have you?
Have you added overflow-x: hidden to the body selector directly in the CSS code? (ie not via JavaScript)
no sorry
I have not yet but I will do that now
I actually did and that did not work. You might be correct about position fixed I will try that
May I make a couple of suggestios for your JS code?
Firstly you are detecting the "click" event on the whole page so every time the user clicks anywhere on the page, the JS is calling the toggleHeader() function.
Whilst this is sometimes a good solution to avoid having 100s of event handlers, in your case you only have 1 so this is being counter-productive as each time the function is called, the JavaScript has to check to see if the target is the "toggle" button. Whilst you probably won't notice it, this is taking time and processing that you really don't need.
In this case it would be better to define the toggle button directly (which by the way should be an HTML button rather than a div) so the JS can get on with toggleing the nav rather than spending time checking if it is the toggle button or not.
My second suggestion is that, rather than checking of the nav has a specific style (-100%), you define a JS variable to hold the "visible" state and toggle this value each time the button is clicked.
Again, this will remove the need for the JavaScript to have to check if the nav has this style applied or not each time the button is clicked.
All in all I would suggest changing this code:
to this:
My son tripped my power just now just got back on so I will do this now just got back on
I was watching videos. I saw that they were doing it this way, the js, because they wanted to make sure that they would get to do this because they said this makes sure that you hitting the target, toggle btn, and if you are not clicking on a link it will go away but I will try it your way but for some strange reason my js is no longer working like wow
before I even changed out the js
I have to go buy a wire real quick but something stopped working in my code also I can't figure it out .
I have no idea why it got fucked up either
don't change the JS if you don't feel it is necessary. That is just how I would do it, but that doesn't mean that I am right. It is probably best to contrate on resoloving your actual issue.
yes that is what I am trying to do now. My JS just stopped working out of no where
are you getting any console errors?
no I am not what is happening is that the right has to be declared in JS for it to know where it is when I am looking for
navLinks.style.right so it is not set for some strange reason. Even thought the JS is defer. Is there a way in the css I can make say -100 now leth the js see this.another reason to store the "visible" state in the JS rather than having to read the element properties each time 😉
so I am going to try it your way real quick to see how it works
I got the no side scrolling I think
If you don't want to change the event listener on the document method, try changing your function to this:
This still uses your general document event listener but I have modified the code to define a variable called "navVisible". This is then toggled (true or false) when the toggle is clicked and your other styles are defined accordingly
I will try this I think I got it I don' t know until I test it for real with a phone lol
This does not work because unless I click the toggle button it won't go away so if I click on the videos button the screen is still there
what I had to do was add this line for it to work in my js
then I redid my js code with toggleBtn because that is a way better naming convention then just toggle lol
works on my computer like a charm does not work for some reason on my phone. I mean it was I updated the site and nothing
never mind I got it to work you can see it if you go to it : )
Fishing With Dummies
I, ALTHEPAL78, am relearning how to fish after many years. I used to fish with my father but haven't done so since childhood. Starting from scratch, I've been learning from various online channels, though none are local to Spring Hill, Florida. I'll be fishing around Clearwater, possibly Saint Petersburg, and Tampa. My boat is an old cruiser, no...
so I think I got it to work on the phone but I lost my phone at a dock today lol so I will test it next time
It's working