• Locked
No replies
Fri, 2019-08-02 10:20
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 3 years 27 weeks ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have this menu at the top of my Web page:

https://ibb.co/X70WWjK

The code and links for the menu are part of an include file in my HTML:

 <nav>
    <!--#include virtual="../navMenu.html" -->
      </nav>

The navMenu.html file looks like this:

<ul class="sf-menu" id="nav">
    <li class="selected"><a href="../index.aspx">Home</a></li>
    <li><a href="../portfolio.aspx">Portfolio</a></li>
    <li><a href="../twitter.aspx">Twitter</a></li>
    <li><a href="../contact.aspx">Contact</a></li>
</ul>

In terms of the CSS, I have this for the sf-menu class:

html body ul.sf-menu ul, html body ul.sf-menu ul li {
    width: 220px;
}
 
html body ul.sf-menu ul ul {
    margin: 0 0 0 220px;
}
 
.sf-menu {
   font-size: 12px;
}
 
ul.sf-menu, ul.sf-menu * {
    margin: 0;
    padding: 0;
}
 
ul.sf-menu {
    display: block;
    position: relative;
}
 
ul.sf-menu li {
    display: block;
    list-style: none;
    float: left;
    position: relative;
}
 
ul.sf-menu li:hover {
    visibility: inherit;
  }
 
ul.sf-menu a {
    display: block;
    position: relative;
}
 
ul.sf-menu ul {
    position: absolute;
    left: 0;
    width: 150px;
    top: auto;
}
 
ul.sf-menu ul a {
    zoom: 1;
  }
 
ul.sf-menu ul li {
    float: left;
    width: 150px;
}

while the nav ID features in my CSS here:

#main, nav, #container, #logo, #site_content, footer {
    margin-left: auto;
    margin-right: auto;
}
 
nav {
    height: 40px;
    width: 950px;
    float: left;
    margin: 0 auto;
    color: #222;
    -moz-border-radius-topleft: 10px 5px;
    -moz-border-radius-topright: 10px 5px;
    -webkit-border-top-left-radius: 10px 5px;
    -webkit-border-top-right-radius: 10px 5px;
    border-top-left-radius: 10px 5px;
    border-top-right-radius: 10px 5px;
    background: #a6e6f4;
}
 
ul#nav {
    float: right;
}
 
ul#nav ul {
    background: #222;
    margin-top: 0;
    padding-bottom: 15px;
    }
 
    ul#nav li a {
        padding: 12px 0 15px;
        font: Normal 120% 'Segoe UI','Droid Sans','Trebuchet MS',NewsCycle,arial,sans-serif;
        text-decoration: none;
        color: #000;
        margin-right: 65px;
        width: auto;
        text-align: center;
    }
 
ul#nav li a:hover, ul#nav li a:focus {
    text-decoration: underline;
    color: #000;
}
 
ul#nav ul li a {
    color: #FFF;
}
 
ul#nav ul li a:hover {
    color: #8ADCF7;
    margin-right: 2px;
}

(I am not sure why that top nav doesn't have a '#' in front of it.)

What I would like to do is introduce two more links to the left of the navigation bar for 'Register' and 'Log in' as indicated in my screenshot, so that they look something like this: Register | Login.

How would I do that, please? I did try to add another Include file navbar1.html, but I couldn't get it to work for me somehow.

Thank you

Top
Tags: