Highlighted

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

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Try this: 

.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

}

TOPICS
Learn Dreamweaver

Views

418

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Try this: 

.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

}

TOPICS
Learn Dreamweaver

Views

419

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

Try this: 

.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

}

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 2
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

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 .

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0