CODEWITHSUNDEEP
htmlcss
iamhx
iamhx

Reputation: 472

CSS make active navigation bar arrow

enter image description here

I want to design my navigation bar for my website like the image above (Credits to StackExchange UX) for a small school project. But I'm not sure how to make the arrow for the active link.

My header:

<header>
    <img src="logo.png" height="125px" width="250px" style="margin-left: 15%;" />
    <div class="myNav">
        <nav>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="courses.html">Courses</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="login.html">Login</a></li>
        </ul>
        </nav>
    </div>        
</header>

It looks a little something like this:

enter image description here

Is there any way to achieve this?

EDIT:

enter image description here

After adding in the arrow my button seems to be expanded like so...

.myNav li a {
    display: block;
    text-align:center;
    padding: 14px 16px 55px;
    text-decoration: none;
    font-family: arial;
    color: navy;
}

.myNav li a.active {
    background: transparent url('youarehere.png') no-repeat center bottom;
}

I've added a bottom padding of 55px as shown above, which caused the button to be bigger. How do i shift only the arrow to the bottom without causing the button to expand?

Upvotes: 2

Views: 3978

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42384

The solution depends on exactly how closely you want to mirror the StackExchange UX header. Assuming you want to keep the same logo, and don't want to have an 'Ask Question' button, you could use something like the following:

<style>
.myNav {
    background-color: #2363a0;
}
.myNav li {
    list-style-type: none;
}
.myNav li a {
    color: #ffffff;
    text-decoration: none;
}
</style>

That will set your background colour to match StackExchange UX's, along with changing the colour of your links. If you want to adjust the height of the header to be shorter like StackExchange UX's, you need to adjust the height of the logo.

EDIT:

As @Dandy pointed out, for the arrow, you need:

.myNav li a.active {
    background: transparent url('youarehere.png') no-repeat center bottom;
}

The additional padding error you're facing is unfortunately not possible to correct with pure CSS. The problem is that you're adding padding to the link itself .myNav li a {}, rather than the visual button .myNav li {}. You're working out which link is active with .myNav li a.active, which is fine for adding the image, but unfortunately CSS has no ability to access the parent selector. That means you can never manipulate the correct element with pure CSS.

The way StackExchange UX solves this problem is with jQuery. Assuming you have access to jQuery, what you would want to do is:

1) Work out which link is currently displayed by grabbing it from the URL (with GET), depending on the structure of your site:

var page = window.location.pathname; // JavaScript
var page = $(location).attr('pathname'); // jQuery

2) Strip the first character:

var page = page.substring(1);

3) Do a calculation based on a match with the variable and the <li> text:

if (page.indexOf('courses') >=0 ) {
    $(".myNav ul li:nth-child(1)").addClass("youarehere");
}
else if (page.indexOf('about') >=0 ) {
   $(".myNav ul li:nth-child(2)").addClass("youarehere");
}
etc.

4) Modify your code so that the triangle gets added to .youarehere{} instead:

.youarehere {
    padding: 14px 16px 55px;
    background: transparent url('youarehere.png') no-repeat center bottom;
}

If you don't have access to JavaScript or jQuery, then unfortunately you'll need to either live with larger clickable areas, or remove that triangle. Of course, you could always simply add the class to the corresponding links in the raw HTML, but I'd assume that you'd want to use the same header code throughout the site.

Hope this helps!

Upvotes: 1

Related Questions