I can't figure out why the navigation bar in my Rails app is displaying vertically instead of horizontally

My Rails app has a navbar crafted with Bootstrap, but it's displaying vertically instead of horizontally. To see the issue in action, you can visit the app here. Despite referencing several articles on the topic (listed below), the problem remains unresolved.

bootstrap navbar displays vertically instead of horizontally

Bootstrap navbar appearing vertically instead of horizontal

Bootstrap navbar is displaying vertically instead of horizontally

navbar is vertical instead of horizontal

Followed a tutorial with identical code where the navbar functions correctly.

For reference, here is the link to the tutorial GitHub repository: https://github.com/StephenFiser/FrogBlog/blob/master/app/views/layouts/_navbar.html.erb

The navbar code is situated in a partial, comprising one dropdown and one regular navbar, both rendering vertically.

Below is the content of my navbar partial _navbar.html.erb

#----------dropdown navbar menu code----------

<div class="collapse" id="exCollapsingNavbar">
  <div class="collapse-bg p-a-1">
    <div class='card'>
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
        </li>
        <li class="list-group-item">
          <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
        </li>
        <li class="list-group-item">
          <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
        </li>
        <% if author_signed_in? %>
          <li class="list-group-item">
            <%= link_to 'My posts', authors_posts_path, class: "nav-link #{yield(:author)}" %>
          </li>
          <li class="list-group-item">
            <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "nav-link" %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</div>


#---------------normal non-dropdown navbar code-----------

<nav class="navbar navbar-light bg-faded">
  <div class='container'>
    <a class='navbar-brand' href='/'>
      Frog<span class='light'>blog</span>
    </a>
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
      &#9776;
    </button>
    <ul class="nav navbar-nav pull-sm-right hidden-xs-down">
      <li class="nav-item">
        <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
      </li>
      <% if author_signed_in? %>
        <li class="nav-item dropdown author-nav">
          <a class="nav-link dropdown-toggle <%= yield(:author) %>" href="#" id="navbarDropdownMenuLink"
             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <%= image_tag(current_author.gravatar_image_url) %>
             <%= current_author.display_name %>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <%= link_to 'My posts', authors_posts_path, class: "dropdown-item" %>
            <%= link_to 'Account', authors_account_path, class: "dropdown-item" %>
            <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
</nav>

It appears that the navbar's container height needs adjustment to fix the vertical orientation. Should I try changing the container, and if so, how can I modify this in the Rails CSS? Alternatively, is there a specific Bootstrap class I can include to correct the vertical display?

Answer №1

If you're utilizing Bootstrap 4, it's best to take advantage of the pre-built components it offers. Trying to recreate these components from scratch can lead to unnecessary complications. By not utilizing the Bootstrap classes and components as intended, you may not achieve the desired outcome.

Here is a functional code snippet for a Bootstrap 4 navbar:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

To make your Rails code function correctly, ensure it generates the HTML structure provided for the example navbar to work effectively.

Begin by adjusting the HTML template to achieve the intended result, and then modify your Rails code accordingly to output the required HTML.

For more information, visit:

https://getbootstrap.com/docs/4.0/components/navbar/

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

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

Close the popover when clicked elsewhere

My code for creating a popover in HTML is shown below: <a data-placement="bottom" style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b> <div id="popover- ...

merging the central pair of columns in the bottom row

I am having trouble combining the middle two columns in the third row of my table code. The columns remain separate and do not merge as intended. Can anyone help me identify what is causing this issue in my code? table { border: 1px solid #999; } td ...

Unable to function in simplistic html/php code, 'Require' fails to operate as intended

I am facing an issue while attempting to import a header.php file into my index.php file. For some reason, it is not working as expected. header.php: <!DOCTYPE html> <html> <head></head> <body> <header> & ...

Unable to capture a screenshot using the Selenium driver on a Mac machine due to Capybara issue

Below is the configuration I have set up for Capybara: require 'selenium/webdriver' # Configuring Capypara with javascript client Capybara.register_driver :chrome do |app| Capybara::Selenium::Driver.new(app, browser: :chrome) end Capybara.re ...

The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/) <table class="body"> <tr> ...

Which HTML tag should I choose to apply color to text in Twitter Bootstrap?

I'm looking to enhance the appearance of a specific word in my text. For example: This is my text, <span class="red">this</span> should be red. Would using the span tag be the appropriate method for achieving this effect? Or are there ot ...

Using jQuery/Javascript to create a dynamic content slider

I am currently working on developing a straightforward content slider. When the page loads, my goal is to display only one item (including an image and some content) and provide a navigation system for users to move through the items. Below is the basic H ...

Using Responsive Design with Bootstrap and Media Queries

As a beginner in front-end development, I have recently learned about media queries and their functionality. Having previously studied Bootstrap, I can't help but wonder if media queries are actually necessary. After all, Bootstrap seems to offer simi ...

Can you specify the doctype used for XHTML5, which is the XML representation of HTML5?

Which doctype is recommended for XML serialization of HTML5? If I keep the file extension as .html, can I still indicate to the browser that the content is XHTML5? ...

The border is not displaying for the Child Div element

I am struggling with a webpage that has two nested divs. Despite trying all the suggestions I have found, I still cannot get the inner div to display its border. On the other hand, I have noticed that the parent div's border shows up without any issu ...

Ways to center the percentage on the progress bar

I'm having an issue with positioning the percentage 100% in the center of the element. I attempted adjusting the spacing in the JavaScript code, but so far it hasn't been successful. Here is the current output for the code: http://jsfiddle.net/G ...

What is the method for displaying a file using a binary string as input?

Is there a way to display a PDF file from a binary string on a web browser? I know that for image files, we can use atob() and then <img src="data:image/png;base64,... But what about PDF files? Is there an equivalent method or syntax like ReadItAs("cont ...

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

There was an issue retrieving the value from the $.ajax() error function, as it returned [

After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

Customize the size of table cells in Bootstrap to fit the content

I am working on a table with Bootstrap where each cell contains a button element. I am trying to adjust the width of each cell to accommodate the button and margin, but using <td class="col-md-1"> doesn't seem to make any difference. Is there a ...

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

Thymeleaf causing Spring IO POST form to redirect to incorrect URL

One of the challenges I'm facing while coding a website is with a form for uploading files. Ideally, when accessing the URL http://localhost:8080/uploadRevision/{docId}, it should lead to http://localhost:8080/uploadRevisionLanding and then redirect b ...