Tips for accurately placing a border on an active link using active_link_to in Rails 4

Currently, I am utilizing active_link_to to monitor changes in the state of my navigation bar links. Upon adding styling to the active state, the appearance resembles the image depicted below. My aim is to shift the border of the active state towards the top of the link, similar to Twitter's navigation bar design. Additionally, it appears that all states are currently displaying as active for the navigation bar when ideally only one link should exhibit the active-state border.

Navigation Item with Awesome Font Icon and top-border floating towards the right

HTML

<nav class="navbar navbar-dark navbar-full navbar-fixed-top bg-inverse" style="font-size: 18px;">
  <a class="navbar-brand" href="#"><%= image_tag 'logo.png' %></a>
  <ul class="nav navbar-nav navbar-properties">
    <% if user_signed_in? %>
        <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>
        ...
</nav>

The awesome_link generates the following link tag:

<a href="/"><i class="fa fa-arrow-circle-o-up"></i></a>

CSS

 nav a.active {
      border-style: solid;
      border-top: thick solid #27CCC0;
    }

Answer №1

Is it possible to utilize both active_link_to and awesome_link simultaneously for the same link, considering they both create the a element?

<li class="nav-item">
      <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
    </li>

Update the code above with:

<li class="nav-item">
      <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %>
  </li>

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

Using CSS, eliminate the drop-down menu from the main navigation on Squarespace

While working on my Squarespace website, I've been impressed with how the FAQ page/questions are structured. However, a drawback is that it creates a clunky drop-down menu when hovering over the FAQ tab in the main navigation. You can see an example ...

Animate the menu as you scroll

I am attempting to create a jQuery top menu that adjusts its height based on the window scroll position. Using $(selector).css("height", "value") works fine, but when I try to animate it, it doesn't behave correctly. Here is my code. Thank you for you ...

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

Ways to position a dropdown submenu on the left-hand side in Bootstrap 4

I'm currently utilizing Bootstrap 4 with a multilevel dropdown feature as shown in the image below: https://i.sstatic.net/xgVLp.png My goal is to shift the submenus to the left side, in the opposite direction from how they are currently displayed. De ...

Having trouble unselecting the previous item when selecting a new item in Reactjs

I have a list of items and I want to change the background color of the currently selected item only. The previously selected item should deselect. However, at the moment, all items are changing when I click on each one. Can anyone help me solve this issue ...

Inserting HTML code directly after a full-screen height responsive div while utilizing Bootstrap 4

So, I have three main components in my design: a navbar, a content div with sections, and a footer. I've managed to make the design responsive for the navbar and content div, but not for the footer yet. The issue lies with the content container, whi ...

"Looking to modify a style within an iframe with React? Here's how you can do it

I want to include an iframe in my react component, but I need to hide a specific element within it. The iframe source comes from an external domain. Is there a way to add custom CSS to the iframe so that I can achieve this? Below is the code for my compo ...

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

Attempting to place words beneath an image can distort the overall layout

Having trouble aligning text under 3 images in a row? All the solutions I've come across end up stacking the images vertically instead of horizontally. HTML: <div id="SecondFooter" class="responsiveColumn"> <a href="link here" t ...

The child div can be scrolled horizontally, while the parent window remains fixed

I am facing a challenge with my HTML and CSS setup. I want to create a child div that scrolls horizontally, but I do not want the parent window to scroll along with it. Below is my current code: <div id="parent"> <div id="div1"> . ...

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

The page background appears to be incomplete in its coloring

As I work on creating a web application for personal use, my goal is to ensure it is mobile-friendly. However, I've encountered an issue where the background of my language page isn't displaying in full blue color as intended. Despite trying diff ...

Looking for an API to retrieve random quotes and images from a website?

Greetings, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS along with the basics of JS. Level of Expertise: Beginner During my exploration, I stumbled upon this intriguing website - . It stands out a ...

Angular toolbar on the left side that hovers seamlessly

1 I am using Angular Material toolbar and trying to position a span inside the toolbar on the left side. I have attempted using CSS float left, but it is not working. Can anyone provide some assistance please? <mat-toolbar> <span>le ...

A guide to customizing the label color in Material-UI's <TextField/> component

How do I change the text color of the "email" label to match the border color? Below is the provided code: import React, { Component } from "react"; import { Icon } from "semantic-ui-react"; import { Divider } from "semantic-ui-react"; import { TextField ...

My mobile is the only device experiencing responsiveness issues

One challenge I'm facing is with the responsiveness of my React application, specifically on my Galaxy J7 Pro phone which has a resolution of 510 pixels wide. Interestingly, the app works perfectly on a browser at this width, as well as on my tablet ...

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

Having trouble getting buttons to wrap onto a new line instead of spilling over the container

Struggling with getting a JSFiddle to work properly with React and other dependencies, I've decided to share the Github repo link to demonstrate the issue: https://github.com/ishraqiyun77/button-issues/ The main problem arises when a group of button ...

Unattended HTML and head tags found unexpectedly

As a new programmer tackling my first RoR site with an integrated bootstrap theme, I've encountered some issues with the HTML code that are causing problems with image sharing on Facebook. The error message from the debugger indicates that there are m ...

Creating a stylish design: integrating a progress bar within a card using Bootstrap 5

I'm currently delving into the world of bootstrap and I'm curious about how to incorporate a progress bar into a card layout to enhance my design skills. I experimented with inline-block and inline display properties, but they didn't yield t ...