Smart conditional statement for concealing specific layout components (navbar/footer) on the main page

For a similar question, refer to this link. This particular question is distinct in that it focuses on implementing a conditional statement to remove a section of the layout instead of the entire file.

I attempted:

if current_page?(root_path)
  # your html
end

Below is the updated version of application.html.erb:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Quicksand|Raleway:600"    rel="stylesheet">

<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_include_tag 'application' %
<%= csrf_meta_tags %>

</head>
<body>

<!--Navbar/Footer-->
 <% if current_page?(root_path) %>
   #NAVBAR
   #FOOTER
 <% end %>**

<!--Javascript-->
<script>
 $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();
 });
</script>

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">      </script>

 </body>
</html>

Updated version of application.html.erb:

<% if current_page?(root_path) %>
 <body>
  <div class="container">
   <div class="content">
    <%= yield %>
   </div>
  </div>
 </body>
<% else %>  
 <body>
  <!--Header-->
  <%= render 'shared/header' %>
  <!--Content-->
  <div class="container">
   <div class="content">
    <%= yield %>
   </div>
  </div>
  <!--Footer-->
   <%= render 'shared/footer' %>
  </body>
<% end %>

To include the navbar, modify app/views/shared/header.html.erb

To add the footer, update app/views/shared/footer.html.erb

Answer №1

If you can't provide your application.html.erb file, I can give you an example:

To customize your application layout, you can create two separate bodies in your application.html.erb file. One body will be displayed on the root page and the other one on all other pages. Here's how you can do it:

<% if current_page?(root_path) %>
    <body>
     <div class="container">
      <div class="content">
        <%= yield %>
      </div>
     </div>
    </body>
<% else %>  
    <body>
    <%= render 'shared/header' %>
    <div class="container">
      <div class="content">
       <%= yield %>
      </div>
    </div>
    <%= render 'shared/footer' %>
    </body>
<% end %>

Make sure to have your footer and header as partials inside your app/views/shared folder for this configuration to work properly.

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

The content spills over the edges, yet a scrollbar emerges to guide the way

I have created an Image Slideshow using HTML5 and CSS. The slideshow consists of a div with the property overflow:hidden. The images are animated to move from right to left within the div. While this functionality works smoothly in Chrome, I am facing an ...

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

Ways to showcase an image that goes beyond the top and bottom boundaries of a div using CSS

Attempting to extend an image beyond the top and bottom of a div. Successful in extending it below, but how can I achieve this effect above? Check out the online demo here. .about { background-image: linear-gradient(100deg, #483dec, #4074eb); } .abo ...

Creating a unique button design that incorporates a select tag and utilizes a dynamic percentage width

How can I keep a custom button positioned 20 pixels away from the right side of a select dropdown menu with a fixed width percentage? Using percentages in the background-position property makes the button move too far when the window is large. Setting the ...

Why does isotope cause strange changes in element styles that disrupt the layout?

I am facing an issue where I want to align different divs with background images next to each other without any spacing, similar to this: https://jsfiddle.net/71qpceqb/ Currently, I am using Bootstrap's row and col to achieve this layout. In the pr ...

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

Aligning Header and Search Icon in Perfect Harmony with the Body

I've been struggling with alignment issues on my Tumblr blog. Specifically, I'm trying to align a header and a search icon. You can find my site here. Here is the mockup I am aiming for: However, if you visit my site, you'll notice that ...

Maintain consistent content height within a Bootstrap card

I have two Bootstrap cards and I want to ensure they maintain the same height, but the content inside .card-body <div class="col-md-6"> <div class="card"> <img class="card-img-top" data-src="hol ...

CSS: The calc() function does not take into account the bottom padding when used in Firefox and Internet

I am encountering an issue with the calc() function in Firefox 32 and IE 11, where the bottom padding of a div is not being respected. However, this problem does not occur in Chrome and Opera. The main content section should have a fixed height while allo ...

The Bootstrap modal is making the content below shift to the left

Encountering an issue with our Bootstrap modal causing the content to align left, specifically on certain Macbooks using Chrome. Interestingly, the problem is present on my co-worker's computer but not on mine, even though the specifications are the s ...

I'm wondering why the columns in my Bootstrap 4 grid don't have uniform height and width

Currently, I am utilizing Bootstrap 4 to create a grid view. However, I have encountered an issue where my columns do not have the same width and their heights are uneven, as evident from the borders. It is mentioned that in Bootstrap 4, columns should inh ...

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Hi there, I have encountered a problem and could really use your assistance. I am attempting to create a menu that displays content when you hover over an li tag. The first content should always be visible when hovering over the first li option or if no l ...

Get rid of the gap below the line following the application of ::first-letter

Trying to create an information page with a question and its answer. Applied indentation and increased the size of the first letter in the paragraph. The issue is the extra space below the first line due to the ::before-letter pseudo-selector. Any ideas or ...

Output a specific portion of the webpage

After extensive research, I have been trying to find a solution that will enable me to print only a specific section of a webpage. Many sources suggest the following steps: Include in HTML head: <link rel="stylesheet" type="text/css" media="print" hr ...

Submitting a form with AJAX and additional fields can be accomplished by including the extra fields in

Imagine a scenario where I am working with a basic form like the one below <%= form_for(@category) do |f| %> <% if @category.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@category.errors.count, "erro ...

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

How about a group-input containing a element added in the center?

Looking to insert a prepend element between two input elements without relying on extra CSS tricks. Is it possible to achieve this using just Bootstrap and without any additional CSS? <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

- Customizing the width of each dropdown level in a unique way

Working on a customized menu design that you can view live at: Focusing on the third level menu, I encountered an issue where all menus have the same width due to sharing the dropdown-menu class. While I understand the root cause of the problem, I am unsu ...