Skip to main content
julies_adobe
julies_adobe
Participant
January 9, 2018
Answered

DW Starter Template - Basic - Multi column - issue with links

  • January 9, 2018
  • 3 replies
  • 1333 views

It's been a while since I put a website together, so I hope I'm explaining this well.  I found the code below in the DW Starter Template called Basic - Single Page css coding.

ul li a {

  color: #FFFFFF;

  text-decoration: none;

}

ul li:hover a {

  color: #2C9AB7;

In the template I'm using, however, (called Basic - Multi column), I am not finding the code for links.  If you select the Basic - Multi column template from Starter Templates, you can access the file called multiColumnTemplate.css.  In "Live" view, you can drag your cursor over the menu items, and as you hover, the text turns from white to gray.  I assumed the code was already prepared for linking since this is a template.  However, when selecting one of the menu items in the gray bar called secondary header in order to assign a link, the default "hover" from white to gray breaks and the text becomes blue and underlined like old school HTML links.  It's like there's no css coding for the a, hover, etc.  Or at least I can't find it.  Can anyone tell me if I'm missing something?  Or tell me what code I should insert to make these links work right?  Also, when I say I'm assigning the link in the Properties Box, all I'm doing is highlighting one of the menu items and selecting an .html file from my site folder.  So once the link is assigned there, the menu item (in the gray secondary header bar) turns blue and underlined. Any input appreciated!

PS-Here are some of the areas where I'm looking for the anchor coding:

.secondary_header {

  width: 100%;

  padding-top: 20px;

  padding-bottom: 20px;

  background-color: #B3B3B3;

  clear: left;

}

.container .secondary_header ul {

  margin-top: 0%;

  margin-right: auto;

  margin-bottom: 0px;

  margin-left: auto;

  padding-top: 0px;

  padding-right: 0px;

  padding-bottom: 15px;

  padding-left: 0px;

  width: 100%;

}

.secondary_header ul li {

  list-style: none;

  float: left;

  margin-right: auto;

  margin-top: 0px;

  font-family: "Source Sans Pro";

  font-weight: normal;

  color: #FFFFFF;

  letter-spacing: 1px;

  margin-left: auto;

  text-align: center;

  width: 16%;

  transition: all 0.3s linear;

}

.secondary_header ul li:hover {

  color: #717070;

  cursor: pointer;

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

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

3 replies

julies_adobe
julies_adobeAuthor
Participant
January 11, 2018

Yes!  That's what I needed.  Thanks!!!

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
January 9, 2018

I'm not thrilled with the CSS code in this multi-column Template.  You have my permission to use another one.

Anyway, add some links to your menu.  You can use temporary # if you like.

<nav class="secondary_header" id="menu">

      <ul>

      <li><a href="#">ABOUT</a></li>

        <li><a href="#">WORK</a></li>

        <li><a href="#">PORTFOLIO</a></li>

        <li><a href="#">SERVICES</a></li>

        <li><a href="#">CLIENTS</a></li>

        <li><a href="#">CONTACT</a></li>

      </ul>

    </nav>

Now that we have anchors to target, we can add these selectors to the CSS code.

.secondary_header ul li {

    list-style: none;

    float: left;

    margin-right: auto;

    margin-top: 0px;

    font-family: "Source Sans Pro";

    font-weight: normal;

    color: #FFFFFF;

    letter-spacing: 1px;

    margin-left: auto;

    text-align: center;

    width: 16%;

    transition: all 0.3s linear;

}

.secondary_header ul li:hover {

    color: #717070;

    cursor: pointer;

}

.secondary_header a {

    color: #FFF;

    text-decoration:none;

}

.secondary_header a:hover, a:active, a:focus {

    color: #717070;

}

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 9, 2018

This is the HTML code.  Since your template contains no links yet, there are no anchors to target.

<nav class="secondary_header" id="menu">

      <ul>

        <li>ABOUT</li>

        <li>WORK</li>

        <li>PORTFOLIO</li>

        <li>SERVICES</li>

        <li>CLIENTS</li>

        <li>CONTACT</li>

      </ul>

    </nav>

Nancy O'Shea— Product User & Community Expert
julies_adobe
julies_adobeAuthor
Participant
January 9, 2018

Hi,

My issue wasn't with targeting/adding anchors to the menu items.  My issue was with the anchors turning blue and underlined once I assigned the <a> tag through the Properties Box.  The problem is that the external .css file doesn't seem to have the code necessary for my links to have a style.

I found a work-around. I will go ahead and share in case someone else is looking to avoid blue, underlined links when assigning an anchor (in the Properties box via Window>Properties) to one of the menu items in the secondary header bar.  The user can specify CSS settings for links in Page Properties by selecting Links (CSS).  A <style> tag (see below) is added in the HTML template once you specify your choices for links.  I would prefer that the multiColumnTemplate.css file contain the code for anchors/links because everything else in this template is user ready.   I think most people prefer the code to be in the .css file, not in the HTML template.  That's the answer I'd really like--how to get the external .css file to have the code  instead of having to add it internally or inline. 

Thanks!

<style type="text/css">

a:link {

    color: #FFFFFF;

    text-decoration: none;

}

a:visited {

    text-decoration: none;

    color: #FFFFFF;

}

a:hover {

    text-decoration: none;

    color: #686767;

}

a:active {

    text-decoration: none;

    color: #FFFFFF;

}

</style>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices