CSS Slide menu does not work as expected - html

here is my situation:
I've created this slide menu:
http://codepen.io/facundo_larocca/pen/vgBmGG
It is working fine and i like it.
The problem happens in the live version, when I tried to add it to my web app, simply it is not responding to the click.
I haven't hosted my app yet and I think it would be too much code to put it all here, but I have my github repo as public.
If you want to check it out, well you will know of course, npm install and then npm start
It is a ReactJS project + CSS, the component, which is not working as I expect is called ThemeSelector. You can check it out here
I'm adding it into this one, check line 42.
All CSS classes can be found here
Whatever you think that is needed to clarify my problem, let my know!!
Thanks in advance and HAPPY NEW YEAR for everybody!!!!
Edited after #Gaby aka G. Petrioli's answer
As I'm using ReactJS instead of pure HTML, for tag must be replaced with htmlFor.

You have forgotten to add the for="navigation" on the label line 22, so they are not linked.

Related

Nav links broken and <s showing as errors in VS Code

I'm building my website directly in HTML, CSS, and JS for the first time. Everything was working perfectly until I signed up for an iOS app called Clone, which I synced with my GitHub account. Inside my faq.html file, I added one space between a link and a word in a paragraph, just as a test.
Afterward, the nav menu on the FAQ page broke and all the <s turned red in VS Code. At the suggestion of #Samirovic, I changed the page icon img src to include _s instead of spaces, which fixed the < errors.
But the URL problem is still happening. The nav menu works on every page except for the FAQ page, which I updated in Clone. On that page, I still get a 404 error page and the URL is doubled within quotes for some reason (which is what causes the error).
URL Example: https://studiooriley.github.io/“https://studiooriley.github.io/contact”
I can't figure out why using the Clone app to add a single space to an FAQ question would cause these issues. I have triple-checked my nav links and can confirm that they're correct. I've been researching for the last six hours and can't find any way to fix this or even anyone else with the same issue.
I would love any help you can provide! I will admit, I'm very new to coding and GitHub, and I didn't understand branches until now, so this all happened in my main branch. I have since made a couple of adjustments in a new branch and in the main branch. I hope you can help. Thank you!
Here's a picture of my HTML in VS Code.
Because of the spaces in the image name inside the src , you must use _ between words

How to make many pages in vs code

So I made 200 line code for a website I'm making and then I made a button to open another page that i will code as well but here is the problem I don't know how to start another page in vs code please help I'm beginner at coding I tried searching in YouTube but nothing helped
It can be hard to learn how to start - but we've all been there. You can do it!
For a brief starter, in VSCode, you can try this, and start learning from this point.
In your first HTML file button, ideally you'll have HTML similar to this: <a href="/file2.html"/>. In VSCode, just create file2.html in the same directory as file1, and add some HTML. It should populate.

Where can I edit/see the HTML of this Wordpress free theme?

the answer to this one will probably be obvious to many of you, but I recently decided to make a website for my girlfriend and expand my knowledge while doing that. So here is my dilemma:
I am using the Blossom Mommy Blog theme, which is a child of the Blossom Feminine theme.
Below a single post page, there is a previous post/ next post navigation menu and the "previous/next" text is in English and I want to change that to be in Bulgarian. I was able to see this in the browser debugger, but I can't seem to find where this comes from in the theme files themself, so any help would be really appreciated!
P.S. I even prepared a screenshot, but apparently I cannot attach files here...
P.P.S. Tried looking at the parent and child functions.php, also the templates, but could not find this HTML. Looks like some function is calling it, but I have no idea where to find this function.
With many thanks,
Dobri
Function: previous_posts_link();
Function: next_posts_link();
Use:
previous_posts_link( "Your label" );
More info:
https://codex.wordpress.org/Function_Reference/next_posts_link
https://codex.wordpress.org/Function_Reference/previous_posts_link

Deleting a Div on My Blog

I'm trying to locate/delete this section on blog posts within my blog. I'm just not sure which part to delete/take out or in which liquid file it would exist.
<div class="title-box">
<h1 class="text-center text-uppercase title-under">BLOG</h1>
</div>
Blog post
https://samplified.us/blogs/tutorials-and-free-downloads/how-to-make-a-beat-like-medasin-tutorial
It just takes up way too much room and doesn't really serve a purpose. I can locate it with inspect tool and delete that div class and it looks perfect.
I'm just not sure where in my theme files I can do that.
When I delete it on google inspector it's exactly how I want it to look.
After Deleting
Time Block
If you use wordpress, usually the css will be on style.css.
You can add display:none to title-box CSS and it will work just fine
First, set up a simple dev environment.
Clone your theme (make sure this theme is not published yet.)
Download ThemeKit
Download your clone theme using ThemeKit. (theme download)
Using ThemeKit watch your changes using the theme preview.
Now try to edit the files and try to figure out what is the best option to delete that div.
Using your favorite text editor search for the keyword title-box and you are going to get all areas where that class is used. You can try to delete it and test out to see if that works for you or not.
If deleting cause too many problems you can try to hide with CSS.
After you pick your solution and its working on your clone theme (preview mode). You can publish the clone theme over the current live theme.

Wordpress stylesheet does not load at login page

I updated Wordpress to 4.3 version and the login page is not styled at all. At the sources the stylesheet doesn't seem to load. Is there any particular reason for this?
Thank you
It's possible the login page was overwriten during the update. Are you using a standard Wordpress Theme (2012, 2013, etc.) or a custom theme. In either case, you should paste your header text so we can see it.
Well, it was overwritten! Unbelievable mistake! I edited a core file and forgot it..And even though you said it before I thought "No way, didn't change it". So it needs a different way to add stylesheet in the login page..the usual enqueue way doesn't work.. did it like this: function my_custom_login() {
echo '';
}
add_action('login_head', 'my_custom_login');
Is this the only way?
Thanks for answering my noob question..