How to change css elements in HAML dependent on what page is calling for the content?

Tags: html,css,ruby-on-rails,haml

Problem :

I am an infant when it comes to Ruby and Rails, and still need to learn everything, but I do have one small item I need help with today.

I am working on a header of a website that uses HAML, and I need to change the class name of a <div> based on the page that is using it.

Here is the issue:

If it is welcome.html.haml, I need a div in header.html.haml to be:

.navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}

For all other pages, I need that same div in header.html.haml to be:

.navbar.navbar-inverse.navbar-static-top{:role => "navigation"}

I was hoping to use something like:

    - if <PAGE IS> == 'welcome.html.haml'

    .navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}

    - else

    .navbar.navbar-inverse.navbar-static-top{:role => "navigation"}

I'm just not sure what condition I can give it. I need help with the <PAGE IS> part.

Or, if there is a simpler solution I am all ears.


Here is what I tried, but getting errors all over the place:

- if controller.action_name == 'welcome'
.navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}
- else
.navbar.navbar-inverse.navbar-static-top{:role => "navigation"}


Solution :

You can get the current controller and action using params:

if params[:controller] == 'home' && params[:action] == 'welcome'


Another solution is to pass a param to your header. In your welcome.html.haml

= render 'header', navbar: :static

And in '_header.html.haml':

<div class="navbar navbar-inverse navbar-<%= local_assigns[:navbar] || 'fixed' %>-top" role="navigation">


Of course unless you render header in layout, then it makes absolutely no sense.

Another way of doing this might be content_for method.

content_for(:navbar_class) { 'fixed' }

<div class="navbar navbar-inverse navbar-<%= content_for?(:navbar_class) ? yield :navbar_class : 'static' %>-top" role="navigation">

    CSS Howto..

    How to retrieve the real height of a #div (including overflowed parts)

    How do I center this menu?

    css: how to inherit whole class

    show/hide will not load

    CSS: How to set procentual width using display:flex?

    How To Fix This “Select” Drop Down Using Css [duplicate]

    How to make a border which wraps around text

    How to read this hover syntax in css?

    How to control layering in HTML/CSS without making links nonfunctioning?

    How to make background images clickable (javascript or css)

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    How can I inline the label with the input horizontally and the inputs vertically

    how create triangle using css [duplicate]

    How to blur one side of the div using CSS

    how to currency convert in java script

    How to have background-image and gradient background-color work on one selector in CSS?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    how to put marquee div at the back of another none marquee div?

    How to make background scale from center outwards with CSS transition

    How to get list of custom CSS properties

    How do you set a JavaScript onclick event to a class with css

    How do I center (vertically and horizontally) buttons in a div tag?

    How can I put my div “downloads” always 70px below my image

    How to show transition of an element that is expanding over nearby content?

    How to make html elements fire effects on other elements using css

    How do I put an image on top of an image without using absolute positioning?

    how do you link static pages in rails to your css files? [closed]

    How do I maintain modularity with mixins?

    How to apply alternate background color for each column in CSS columns

    How to build bootstrap version 4 so that the CSS only contains specific parts, such as grid?