Having trouble finding the right code for a style I'm trying to apply.

[LIZZIE]

I'm basically just making the finishing touches on my navigation menu at this point, and while I have styled the menu almost completely how I wanted it, there are still two problems.

1.

I would like to line up the 'x' that appears so that you can close the overlay menu with the hamburger icon that you use to open it. It just makes more sense that way. Right now, you'll be able to see that the 'x' is much lower and more to the left than the hamburger icon. However, I can't find the correct line of code that will allow me to alter where the placement of that 'x' should be for some reason.

2.

I was also trying to find the correct line of code to add a fixed highlighting on the menu item that you're currently on. As a quick example...

If you're on the home page, I would like the menu item in the overlay to look like this.

Home Page

About

Contact

Information

...and then when you switch to another page, like the "information page," it should look like this...

Home Page

About

Contact

Information

Pokémon - English dubbed episode 0001

I'm for some reason stuck on these two problems now. I was able to find everything else and style it accordingly, and I even added code of my own to gain additional properties that I preferred, but I'm clearly missing something here.

Thank you for any help that you could give to me.

[Nancy OShea]

Those social icons are still in the way and  I'm not loving the low contrast menu items.  For people with less than perfect vision, it's difficult to see.

[LIZZIE]

Are you viewing the social media icons on an internet browser? They appear much bigger on a shrunken browser window then they do on an actual mobile device. Actually, it's pretty much chrome that's the problem on my end.

In any case, now my website looks like 75% of all websites with social media icons on them. "In the way."

The colors are a work in progress. I'll probably do a color swap between the two since the highlight color doesn't really matter on mobile devices anyway.

now that I'm looking at chrome on my phone, actually, the social media icons aren't displaying as big as that on a mobile device using the browser either. I'm not sure why that is. The buttons will probably go through several changes, anyway.

In any case, it's not of a concern to this specific question, I guess.

[Nancy OShea]

The problem is your burger icon is not inside the overlay window.  So nobody can click/tap it when the menu is open.   You have to provide a logical way for users to close the overlay window.  Right now  X has that spot. 

[LIZZIE]

I'm alright with the 'x' actually. I just want to move it's position to once it does appear, it will be over the place where the hamburger is. That way the users finger isn't moving to all sorts of different places on the screen to open and close things.

[Nancy OShea · Accepted solution]

Try this: 

.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

}

[LIZZIE]

along with this...

margin-right:10px;

padding-top: 15px;

It lined up perfectly. Pretty much, anyway.

That's it for the first problem then. Now I just need to figure out the active selection. Problem No. 2.

[Nancy OShea]

Only 1 correct answer is allowed per topic by this forum.  Please start a new topic for your other questions.   It works better that way .