What is the best way to customize a hyperlink to match the current webpage design?

I have created a navigation bar at the top of my website screen. I want to implement a feature where the word corresponding to the current page is highlighted. For example, if I am on the "Contact" page, the word "Contact" should be highlighted, and so on. The catch is that I can only use CSS and HTML to achieve this.

body {
        background: black;
    }

    nav {
        padding:0;
        right:1vw;
        margin: 0 0 0px 0;
        position: fixed;
        top: 0vh;
        text-align:center;
        background-color:rgba(255, 255, 255, 0.4);
        width:98%;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    nav li {
        top:2vh;
        font-family:Verdana, Geneva, sans-serif;
        font-size: 13pt;
        display: inline-block;
        margin-left:2vw;
        margin-right:2vw;
        margin-bottom:2vh;
        margin-top:2vh;
    }

    nav li a {
        white-space: nowrap;
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        text-shadow: 1px 1px 2px rgba(71, 80, 23, 0.3);
        color: #fff;
        padding: 0;
        letter-spacing: 1px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        text-align:center;
    }

    nav:hover li a {
    }

    nav li a:hover {
        background: transparent;
        text-shadow: 0px 0px 20px #cc9900;
        color: #ffff99;
    }
<nav>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/dedump.html">De dump</a></li>
            <li><a href="/opdrachten.html">Opdrachten</a></li>
            <li><a href="/groepsopdracht.html">Groepsopdracht</a></li>
            <li><a href="/overmij.html">Over mij</a></li>
            <li><a href="/contact.html">Contact</a></li>
        </nav>
htmlcss

Answer №1

To implement the code below, make sure to adjust it to your needs:

a:link, a:visited {
     display: block;
     width: 175px;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #00BFFF;
     text-align: center;
     padding: 4px;
     text-decoration: none;
     text-transform: uppercase;
  }

a:hover, a:active {
     background-color: #0066FF;
 }

Answer №2

To enhance the appearance of the list item <li>, consider adding a specific class, such as 

<li class="active"><a href="/index.html" style="text-decoration:none">Home</a></li>
, if you are on the home page.

Similarly, if you find yourself on the De Dump page, then the corresponding <li> should look like this:

<li class="active"><a href="/dedump.html" style="text-decoration:none">De dump</a></li>

Once you have applied these changes, feel free to customize the appearance by styling the class in your CSS with the following code:

.active{
color:red;
}

Answer №3

If you want to customize the appearance of a specific list item on your webpage, you can target that item directly in the CSS for that page. For instance, if you want to style the "Opdrachten" list item, you can add the following styling:

nav li:nth-child(3) a{
    background:yellow;
    box-shadow:0 0 4px red;
    border-radius:4px;
}
<nav>
    <li><a href="/index.html" style="text-decoration:none">Home</a></li>
    <li><a href="/dedump.html" style="text-decoration:none">De dump</a></li>
    <li><a href="/opdrachten.html" style="text-decoration:none">Opdrachten</a></li>
    <li><a href="/groepsopdracht.html" style="text-decoration:none">Groepsopdracht</a></li>
    <li><a href="/overmij.html" style="text-decoration:none">Over mij</a></li>
    <li><a href="/contact.html" style="text-decoration:none">Contact</a></li>
</nav>

Answer №4

CSS

nav ul li {
    background-color: #000000;
}

#page1 ul li.page1 {
    background-color: #FFFFFF;
}

#page2 ul li.page2 {
    background-color: #FFFFFF;
}

#page3 ul li.page3 {
    background-color: #FFFFFF;
}

HTML for Page 1

<nav id="page1">
    <ul>
         <li class="page1"><a href="page1.html">Page 1</a></li>
         <li class="page2"><a href="page2.html">Page 2</a></li>
         <li class="page3"><a href="page3.html">Page 3</a></li>
    </ul>
</nav>

HTML for Page 2

<nav id="page2">
    <ul>
        <li class="page1"><a href="page1.html">Page 1</a></li>
        <li class="page2"><a href="page2.html">Page 2</a></li>
        <li class="page3"><a href="page3.html">Page 3</a></li>
    </ul>
</nav>

Update nav id to = page3 for the third page

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the height of a GAS iframe in WordPress with iframe-resizer: A step-by-step guide

I would like to embed an iframe of my Google Application Script Web into my WordPress site without the scroll bar. Refer to the image below for context. https://i.stack.imgur.com/7L6Tw.png I encountered an error message while attempting to use the iframe ...

javascripthtmlgoogle-apps-scriptiframeiframe-resizer

jQuery UI Tabs - The initial slide is not being displayed automatically

My default setting for the first tab is .ui-tabs-hide, causing it to be hidden along with all other tabs. Here's my code snippet: <script> $(document).ready(function(){ $("#slide-container").tabs({ fx: { opacity: 'toggle' ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Managing scroll position based on media queries in JavaScript

I'm currently working on implementing a fade-in/out effect on scroll for a web project. In my JavaScript code, I need to specify a certain value for the scroll position, such as an offset, to trigger the effect. The issue: The offset value may not ...

javascripthtmlcssresponsive-designmedia-queries

Troubleshooting issues with adding rows to an HTML table

I want to include two buttons at the top of my page: Save and Cancel. These buttons should only appear after clicking the Submit button on the Customer Information panel. However, when trying this, the Customer Information panel is pushed down while I al ...

htmlcssangularjsforms

The form will be submitted even if the validation conditions are not met, and the form

I've been struggling to understand why this issue keeps occurring despite hours of unsuccessful research. Here's the code for a registration page that submits the form regardless of the conditions being true or false. I've experimented with ...

javascriptphphtmlajaxforms

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

[Help needed! I am trying to store the marks, id, and name values of each cell in objects of an array. However, I am not getting the correct answer. Can someone guide me on how to properly store the marks and id of each cell in objects of an array? const [ ...

javascripthtmlreactjsmaterial-uimaterial-table

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

continuously refresh choices available for selection

I am looking for a way to dynamically populate the second select option based on the selection made in the first select option. While I know how to achieve this using traditional jQuery and HTML, I was wondering if there is a way to update options_for_sele ...

jqueryhtmlruby-on-rails

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

javascriptjqueryhtmlscrollscrolltop

Issues with tabbed navigation functionality in jQuery

I'm encountering some difficulties with the tabbed navigation I created using CSS. Essentially, when a button is clicked, it should remove the hidden class from one div and add it to the other. However, what actually happens is that the div which sho ...

javascriptjqueryhtml

I rely on Nebular for my Angular application, however, I am looking to make some manual CSS changes that I am having difficulty implementing

While using Nebular for my Angular app, I have run into issues with changing some CSS manually. Specifically, when using nb-select or nb-toggle, I am unable to customize the CSS as desired. Do you have any suggestions to help me with this problem? enter i ...

cssangularnebular

If the text is a single line, center it. However, do not center the text if it

Can we center align text horizontally if it occupies a single line, but refrain from center aligning and use white-space: normal when the text spans multiple lines (ideally without the need for JavaScript)? ...

htmlcss

Build a basic website featuring a left-side menu and content on the right side

I intend to design a straightforward website featuring: A left menu with clickable items Clicking on each item will change the right menu to display new content consisting of a title, picture 1, text description, and picture 2. This format will be consis ...

javascriptjqueryhtmldreamweaver

Validating fields using JavaScript and HTML

I'm having an issue with the code below because it only allows me to log in with the user and password from the last position of the arrays. I want it to let me login with each user and their corresponding password, for example, user at position 1 wit ...

javascripthtmlfor-loopif-statement

Concealing a DIV element when the value is not applicable

I'm currently working on a website for a coffee shop product. On this site, each product has a coffee strength indicator that is determined by the database. The strength can be categorized as Strong, Medium, Weak, or n/a (for non-coffee products). If ...

javascriptjqueryhtml

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Employing ajax with dynamically created buttons in PHP

I'm struggling to figure out what to search for in this situation. I've tried piecing together code from others, but it's just not working for me. My ajax function successfully retrieves data from a database through a php page and displays ...

javascriptphpjqueryhtmlajax

Achieving equal height and width for 2 divs through Bootstrap/CSS techniques

I'm attempting to ensure that these two divs within a table have the same height and width using the following code: <div class="container"> {{#if orders}} <div class="filter"> <ul class="nav nav ...

htmlcssbootstrap-4