Skip to main content
LIZZIE
LIZZIE
Inspiring
April 24, 2019
Answered

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

  • April 24, 2019
  • 1 reply
  • 943 views

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.

This topic has been closed for replies.
Correct answer Nancy OShea

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.


Try this: 

.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

}

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 24, 2019

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.

Nancy O'Shea— Product User & Community Expert
LIZZIE
LIZZIEAuthor
Inspiring
April 24, 2019

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
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 24, 2019

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. 

Nancy O'Shea— Product User & Community Expert
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices