Highlighted

find the correct line of code to add a fixed highlighting on the menu item that you're currently on

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

I finally fixed it. It actually had nothing to do with any of the problems that you or myself had pointed out. There was a comma in my css before the beginning of the brackets.

The css was like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums, {
        
color: #FC3131;
        
}

when it should have been like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums {
        
color: #FC3131;
        
}

It had been working, but the style was not, apparently. Go figure...

TOPICS
Learn Dreamweaver

Views

545

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

find the correct line of code to add a fixed highlighting on the menu item that you're currently on

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

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.

I finally fixed it. It actually had nothing to do with any of the problems that you or myself had pointed out. There was a comma in my css before the beginning of the brackets.

The css was like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums, {
        
color: #FC3131;
        
}

when it should have been like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums {
        
color: #FC3131;
        
}

It had been working, but the style was not, apparently. Go figure...

TOPICS
Learn Dreamweaver

Views

546

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

Below is a pure CSS method.

Persistent Page Indicator on Menus - https://alt-web.com/

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 1
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

hmmm, I tried following your tutorial, but it doesn't seem to be working for some reason...? Do you see anything that I messed up?

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 25, 2019

Copy link to clipboard

Copied

You forgot to give a class name to  your <body> tag.  When the <body class matches an anchor class,  automatic highlighting (or whatever style you gave it) occurs..

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

You mean the body tag that holds all of the web page's content, right? I was pretty sure I did that. I will try again.

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

I tried again, and it is still not working.

I am receiving this error on the line where my closing </body> is, though.

"Tag must be paired, missing [</div>], start tag match failed [<div>] on line 40."

I'm not exactly sure what it means by that, so I don't know how to correct it.

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 25, 2019 0
Adobe Community Professional ,
Apr 25, 2019

Copy link to clipboard

Copied

No, no, no.  Don' add a 2nd <body> tag to your document.  Simply add a class to the current <body> tag.

On your index page, change <body> to <body class="homepage">

On your contact page, change <body> to <body class="contact"> and so on....

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

Hmm? I didn't add a second one. There should only be one there. I'll check again, but I don't think that's what I did.

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 25, 2019 0
Adobe Community Professional ,
Apr 25, 2019

Copy link to clipboard

Copied

You have an unclosed <div> tag somewhere.

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

Still? Dreamweaver isn't sending me back any errors. It was up until this point, though. I'll check again.

You know what? In the code from yesterday you sent me, there's a body tag in that. Letme check what happenes when I get rid of it.

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

I did away with a  </head> that didn't have a start it seemed, and then a <body> that didn't have a closing tag. I It is, however, still not working correctly.

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 25, 2019 0
Adobe Community Professional ,
Apr 25, 2019

Copy link to clipboard

Copied

If your server-side include file contains anything more than just the relevant menu code, you're breaking your site from within.  Are you using a local testing server to parse your includes?   If yes, switch to Live Code and validate the Live Document from DW CC.

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

This is the include that is being called on resolutions below 1000px. I think it's just the necessary code. It shouldn't make a difference if I were to paste it directly in the body of my webpage.

<header class="header" id="header">

    Leeighton Talks About Pokémon

</header>

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style> 
body { font-family: 'Josefin Sans', sans-serif; } 
 
.overlay { 
height: 0%; 
width: 100%; 
position: fixed; 
z-index: 100; 
top: 0; 
left: 0; 
background-color: rgba(255,255,255,1.00); 
background-color: rgba(255,255,255, 0.9); 
overflow-y: hidden; 
transition: 0.5s; 

.overlay-content { 
position: relative; 
top: 12%; 
width: 100%; 
text-align: center; 
margin-top: 10px; 

.overlay a { 
padding: 8px; 
text-decoration: none; 
font-size: 48px; 
color: #b9b9b9; 
display: block; 
transition: 0.3s; 

.overlay a:hover, .overlay a:focus { color: #000000; } 
.overlay .closebtn { 
position: absolute; 
top: 20px; 
right: 45px; 
font-size: 60px; 


.navigation {

  overflow: hidden;
  background-color: #ffffff;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  padding-top: 10px;

}


.overlay .closebtn {

    font-size: 80px;

    top: -40px;

    right: -15px;

margin-right:10px;

padding-top: 15px;

}

 
@media screen and (max-height: 450px) { 
.overlay { overflow-y: auto; } 
.overlay a { font-size: 20px } 
.overlay .closebtn { 
font-size: 40px; 
top: 15px; 
right: 35px; 


</style> 

<div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<div class="overlay-content"> <a class="homepage" href="index.html">Home Page</a> <a class="news" href="news.html">News</a> <a class="videogames" href="video-games.html">Video Games</a> <a class="leeightonsanimewalkthrough" href="leeighton-s-anime-walkthrough.html">Leeighton's Anime Walkthrough</a> <a class="pokedex" href="pokedex.html">Pokédex</a> <a class="forums" href="https://www.leeightontalksaboutpokemonforums.net/">Forums</a> </div> 
</div> 
<div class="navigation">
<span style="float:right;margin-right:15px;font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>  
 
  </div>
<script> 
function openNav() { 
  document.getElementById("myNav").style.height = "100%"; 

 
function closeNav() { 
  document.getElementById("myNav").style.height = "0%"; 

</script> 

<style>

   body.homepage a.homepage,
   body.news a.news,
   body.videogames a.videogames,
   body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough,
   body.pokedex a.pokedex,
   body.forums a.forums, {
   
   
    color: #000000;
   
        

}
</style>


<div>

<script type="text/javascript" src="returntothetopbutton.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">&#x2191</button>

</div>

<div class="social-media">

    <a href="https://www.facebook.com/" target="_blank">

      <img src="pictures/social-media/facebook.png" width="100" height="100" alt=""/>

    </a>

    <a href="https://www.twitter.com/" target="_blank">

    <img src="pictures/social-media/twitter.png" width="100" height="100" alt=""/>

    </a>

    <a href="https://www.youtube.com/" target="_blank">
 
    <img src="pictures/social-media/youtube.png" width="100" height="100" alt=""/>

    </a>

    <a href="https://www.instagram.com/" target="_blank">
 
    <img src="pictures/social-media/instagram.png" width="100" height="100" alt=""/>

    </a>

</div>





        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
        <style>
          .btn.share-btn {
              border: medium none;
              box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
              color: #fff;
              cursor: pointer;
              display: inline-block;
              font-size: 1.2em;
              margin-top: 6px;
              opacity: 0.9;
              outline: medium none;
              padding: 8px 16px;
          }

            .share-btn {
                display: inline-block;
                color: #ffffff;
                border: none;
                padding: 0.2em;
                width: 4em;
                opacity: 0.9;
                box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
                outline: none;
                text-align: center;
            }

            .share-btn:hover,
            .share-btn:focus {
              color: #eeeeee;
            }

            .share-btn:active {
              position: relative;
              top: 2px;
              box-shadow: none;
              color: #e2e2e2;
              opacity: 1;
              outline: medium none;
              position: relative;
              top: 2px;
          }

          .twitter {
              background: #55acee none repeat scroll 0 0;
          }
        
          .facebook {
              background: #3b5998 none repeat scroll 0 0;
          }
         
          .reddit {
              background: #ff5700 none repeat scroll 0 0;
          }
         
          .email {
              background: #444444 none repeat scroll 0 0;
          }
        </style>

        <!-- Social Button HTML -->

       <div class="sharebuttons"> 

        <!-- Facebook -->
        <a href="http://www.facebook.com/sharer/sharer.php?u=<URL>" target="_blank" class="btn share-btn facebook">
            <i class="fa fa-facebook"></i>
        </a>

 
  <!-- Twitter -->
        <a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<VIA>" target="_blank" class="btn share-btn twitter">
            <i class="fa fa-twitter"></i>
        </a>

      

        <!-- Reddit (url, title) -->
        <a href="http://reddit.com/submit?url=<URL>&title=<TITLE>" target="_blank" class="btn share-btn reddit">
            <i class="fa fa-reddit"></i>
        </a>

      

        <!-- Email -->
        <a href="mailto:?subject=<SUBJECT&body=<BODY>" target="_blank" class="btn share-btn email">
            <i class="fa fa-envelope"></i>
        </a>
    
    
      </div>

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 25, 2019 0
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

I finally fixed it. It actually had nothing to do with any of the problems that you or myself had pointed out. There was a comma in my css before the beginning of the brackets.

The css was like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums, {
        
color: #FC3131;
        
}

when it should have been like this...

body.homepage a.homepage, body.news a.news, body.videogames a.videogames, body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough, body.pokedex a.pokedex, body.forums a.forums {
        
color: #FC3131;
        
}

It had been working, but the style was not, apparently. Go figure...

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 25, 2019 0
Adobe Community Professional ,
Apr 25, 2019

Copy link to clipboard

Copied

No comma after forums because it's the last selector in your list

body.homepage a.homepage,

body.news a.news,

body.videogames a.videogames,

body.leeightonsanimewalkthrough a.leeightonsanimewalkthrough,

body.pokedex a.pokedex,

body.forums a.forums { color: #000000;}

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 25, 2019 0
LIZZIE LATEST
Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

Ah, looks like I posted before you got to it. Thank you, though!

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 25, 2019 0