Are the site-wide navigation links working on one page but not the other?

Currently, I am in the process of constructing a website on rails and have successfully integrated a site-wide navigation bar to display on all pages. However, an issue has arisen where the navbar is visible on both pages, yet the links and hover effects are only clickable on one page. Despite rendering the same _navigation.html.erb and nav.scss files, I cannot pinpoint what has caused this discrepancy.

_navigation.html.erb

<nav>
  <div class="container nav-container">
    <div class="row">
      <div class="nav-wrapper">
        <a href="#" id="brand-logo" class="col l2"><img src="<%= asset_path('social-playground-logo.png')%>"></a>
          <ul id="nav-mobile" class=" col l10 right hide-on-med-and-down nav-desktop">
            <li><a id="link-home" href="">Home</a></li>
            <li><a id="link-toys" href="">Toys</a></li>
            <li><a id="link-pastevents" href="">Past Events</a></li>
            <li><a id="link-contacts" href="">Contacts</a></li>
            <li><a id="link-partners" href="">Partners</a></li>
          </ul>
      </div>
    </div>
  </div>

The navbar and hero image extract for gifpage.html.erb (functioning correctly)

<div class="hero-image-container group">
    <%= render 'layouts/navigation' %>
    <img id="gif-foreground-hero" src="<%= asset_path( 'GIF Foreground FInal.png') %>" class="responsive-img">

The navbar and hero image extract for selfies.html.erb (not functioning correctly)

<div class="selfies-hero-image-container group">
    <%= render 'layouts/navigation' %>
    <img id="selfie-foreground-hero" src="<%= asset_path( 'Selfie-hero-foreground.png') %>" class="responsive-img">

_nav.scss file affecting both pages

nav {
    height: 112px;
    line-height: 23px;
    background: rgba(10, 10, 10, 0.5);

    .nav-container {
        width: 100%;

        #brand-logo {
            transform: scale(0.8);
            margin-top: 7px;
            margin-left: 4%;
        }

        #nav-mobile {
            margin-right: 0%;
            margin-left: 0%;
            width: 79.33333%;
        }

        ul li {
            margin-top: 27px;
            margin-left: 29px;

            a {
                text-transform: uppercase;
                border: 4px solid rgba(255, 255, 255, 0);
                margin: 0px;
                padding: 14px 25px;
                display: inline-block;

                &:hover {
                    border: 4px solid rgba(255, 255, 255, 1);
                }
            }
        }
    }

}

The hover effect appears on the gif page but not on the selfies page.

Thank you!https://i.sstatic.net/QfGwK.jpg

https://i.sstatic.net/JMiIk.jpg

Both hero images display through the navbar which has 0.5 opacity.

Thanks

EDIT

Output from the terminal 

Started GET "/gifpage" for 59.167.19.225 at 2015-10-21 05:30:23 +0000
Cannot render console from 59.167.19.225! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#gifpage as HTML
  Rendered layouts/_navigation.html.erb (0.5ms)
  Rendered pages/gifpage.html.erb within layouts/application (62.3ms)
  Rendered layouts/_footer.html.erb (0.0ms)
Completed 200 OK in 445ms (Views: 444.1ms | ActiveRecord: 0.0ms)

with,

Started GET "/assets/_nav-87ab5873b40bcbbebe26b4faa985fc95.css?body=1"

referencing the _nav.scss file being used for the functional page, and,

Started GET "/" for 59.167.19.225 at 2015-10-21 05:34:25 +0000
Cannot render console from 59.167.19.225! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by PagesController#selfies as HTML
  Rendered layouts/_navigation.html.erb (0.9ms)
  Rendered pages/selfies.html.erb within layouts/application (8.0ms)
  Rendered layouts/_footer.html.erb (0.0ms)
Completed 200 OK in 410ms (Views: 408.8ms | ActiveRecord: 0.0ms)

with,

Started GET "/assets/_nav-87ab5873b40bcbbebe26b4faa985fc95.css?body=1"

related to the _nav.scss file being utilized for the malfunctioning page.

I diligently compared both CSS files and structures side-by-side using Chrome's inspect element tool, and discovered no discernible differences. The mystery remains unsolved!

htmlcssruby-on-railssassmaterialize

Answer №1

Examining the source code may reveal whether the asset pipeline is rendering the same .css file; it's possible that different controllers are using different css files. Another approach could be to use inspect element, which will display the loaded css for each controller. It's also worth considering the possibility of encountering issues related to the css ordering of LVHA (link/visited/hover/active).

Answer №2

Appreciate all the feedback and ideas shared. Today, I successfully resolved the issue at hand. It turned out that the hero image was positioned on top of the navigation menu items, causing the hover effect to be ineffective (since the browser detected my cursor over the image instead of the navbar). By adjusting the z-index of the image to 1 and the navbar to 2, the problem was resolved. Now, the browser recognizes my cursor hovering over the navbar while keeping the image in the background.

After exhausting all other options, I opted to start fresh and recreate the page from scratch. Surprisingly, simply resizing the overlaying image slightly smaller resulted in the hover effect working only on the outer edges of the navbar, ultimately leading me to finding a solution.

Thank you once again, Justin

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

`Take action on a row by selecting the Edit option in CodeIgniter`

In my table, I have data displayed with an edit button in each row. What I want is for a pop-up or lightbox to appear when the edit button is clicked, without refreshing the page, and display all fields within that box. I am familiar with updating in the c ...

phpjqueryhtmlajaxcodeigniter

Are your GetJSON requests failing to execute properly?

I have a code snippet that executes in a certain sequence and performs as expected. <script> $.getJSON(url1, function (data1) { $.getJSON(url2, function (data2) { $.getJSON(url3, function (data3) { //manipulate data1, data2, ...

javascriptjqueryhtmljsoncall

Using Jquery to Select Start and End Dates

I currently have two date input fields labeled as Start Date and End Date for a specific Project. If the user chooses a start date that is earlier than today's date but does not choose an EndDate, I want to indicate that the project is ongoing. How c ...

jqueryhtml

Utilizing the power of JSF ajax with Bootstrap's data-toggle feature for radio buttons

Despite my efforts, I have not been able to find a definitive answer on SO. If this question has already been addressed, please point me in the right direction. This is what I currently have: (HTML) <span class="btn-group" data-toggle="buttons-radio" ...

htmlajaxjsftwitter-bootstrapradio-button

Unable to display images for Wordpress posts within list items

I am currently using this code to retrieve all images uploaded to a post within a specific category. The intention is to have these images displayed in a slider as list elements, but the current implementation looks like this: <li> <img...> &l ...

phphtmlwordpress

The clickable functionality of buttons and text labels in Vue is currently not working

When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...

cssjsonvue.js

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...

javascriptjquerycss

How to insert additional spacing within an input tag class in dynamic HTML using jQuery

When creating an html table dynamically from json data, I encountered an issue with adding space inside my input button control. It seems that after separating two classes with a space, the code is not functioning properly in this snippet environment. Howe ...

jquerycssasp.net-mvcdynamic-html

What are the best strategies to perfectly insert an image within a div, ensuring that no background color is visible?

Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...

htmlcss

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data? <carousel> <slide> <img src="../../assets/wts1.png" alt="first slide" style="display: inline-blo ...

angularhtmlcssangular-materialcarousel

Show the chosen option when the textarea is no longer in focus

My form includes a text box and a button: <p><textarea rows="4" cols="30">Aliquam erat volutpat.</textarea></p> <p><input type="button" value="Submit"></p> When the user selects text in the textarea and then cl ...

javascriptjqueryhtmlcss

When hovering over the child element, the hover effect on the parent element should be disabled

I'm dealing with a situation where I have two nested <div> elements. <div class="parent"> <div class="child"></div> </div> The challenge here is that I want to change the background of the .parent ...

csshover

Replicate the form to a new one while concealing the elements and then submit it

Initially, I was working with just one form. Now, I find myself in a situation where I need to utilize a different form which contains the same inputs. This is necessary because depending on the action taken upon submission, different processes will be tri ...

javascriptjqueryhtmlforms

Pay attention to the input field once the hidden attribute is toggled off

In attempting to shift my attention to the input element following a click on the edit button, I designed the code below. The purpose of the edit is to change the hidden attribute to false. Here's what I attempted: editMyLink(i, currentState) { ...

htmljqueryangulartypescript

Using Python in Selenium to set the value of a dropdown menu within an <input> element

I am working with an HTML page that has a form containing a dropdown tag. My goal is to set the value of this dropdown tag using Selenium. When I retrieve the input element, here is the code snippet: driver.find_element_by_xpath("/html/body/div[2]/div/di ...

pythonhtmlseleniumxpath

Tips on choosing and retrieving the value of filled text area fields using jQuery

I am struggling with selecting non-empty textareas and retrieving their values using jQuery. Here is a snippet of my code: <div class="item"> <textarea class="col-sm-10 comment">TextArea1</textarea> </div> <d ...

javascriptjqueryhtml

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

htmlcss

Utilizing angularjs ng-repeat directive to present JSON data in an HTML table

I've been struggling to showcase the JSON data in my HTML table using AngularJS ng-repeat directive. Here's the code snippet: <thead> <tr> <th ng-repeat="(header, value) in gridheader">{{value}}</th> </tr> </ ...

javascriptjsonangularjshtml

Unable to render HTML in Simple Product Name on Magento platform

Is there a way to include HTML in my basic product titles, such as: <strong>A.</strong> Product Title Name However, the frontend displays these HTML tags. Is there a method to enable parsing of all HTML tags? ...

phphtmlmagento

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

javascriptjavahtmljsonajax