What could be causing my Bootstrap 4 containers to overlap?

At narrower widths, I am facing an issue with my Bootstrap 4 containers. The container for the image (on JSFiddle line 28) is overlapping with the container for navigation (on JSFiddle line 16). I need a solution to prevent this overlap.

<div class="container" style="">
  <hr style="width:80%">
  <nav class="custom-navbar">
    <a href="/">Home</a>
    <a href="/architecture/">Architecture</a>
    <a href="/product/">Product</a>
    <a href="/portraits/">Portraits</a>
    <a href="/wildlife/">Wildlife</a>
    <a href="/about/">About</a>
  </nav>
</div>

<div class="container">
  <img class="" src="https://www.rishulbangar.com/img/baan-thai-cover.jpg">
</div>

Check out the issue on JSFiddle: https://jsfiddle.net/AakLak/npegafkw/5/

cssbootstrap-4

Answer №1

The issue lies in the definition of the custom-navbar class where a fixed height is specified:

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

When the links need to span across two lines, this causes overflow. Removing the fixed height will resolve this problem. You can view the fix here:

JS-Fiddle

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 jQuery functions to disable adding or removing classes with a click event

Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div? <div class="new-discussion small"> <a class="cancel">Cancel&l ...

javascriptjqueryhtmlcss

The hover effect on the ul element is not functioning as intended

Has anyone encountered issues with hovering over ul elements not working? http://jsfiddle.net/Samfr/5/ <ul class="navi"> <li> <a class='light'> Item1 <div class="hover-name" style="display:none"& ...

javascriptjqueryhtmlcss

Various degree of stacking priority ordering

I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet: https://jsfiddle.net/bnh3487n/ div { width: 100%; } #wrapper { width: 500px; height: 500px; ...

htmlcss

Creating a FusionCharts time series with a sleek transparent background

Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...

cssreactjssvgfusioncharts

Customize the appearance of a React tab to eliminate the border on the bottom

When it comes to styling material tabs, I've managed to customize them by creating a theme and overriding the defaults like this: MuiTab: { styleOverrides: { root: { textTransform: 'capitalize', // Set textTransform to capitalize ...

cssreactjsmaterial-ui

Ensure that the Left and Right menu are fixed in position, while allowing the middle content to be scrollable

I'm in the process of creating a web page with a fixed left and right menu, while the middle content should be scrollable and positioned behind the menus. I've attempted to implement this using the following HTML and CSS, but encountered an error ...

csshtmltwitter-bootstrap-3

The PNG logo will display with white borders when viewed on Internet Explorer 9

My current project involves developing an asp.net mvc web application. In the upper top navigation bar, we have a blue area where I am trying to display our logo using the code snippet below: <a class="brand" href="~/Home/Index/"> <img alt="Group ...

htmlcsslayout

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

javascripthtmlcssbootstrap-5

Positioning Bootstrap footer vertically in HTML

Having trouble with aligning the left text and custom styled button to the right and top of the checkout button, despite using various codes like float:right, margin-left, position relative/absolute. Shifting the button also didn't work, so now consid ...

htmlcssbootstrap-modal

Unforeseen issues arise when working with CSS selectors

Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code: https://codepen.io/buoyantair/pen/JNgqXG?editors=1100 Let me share the snippets for Pug Script and Sass file: Pug Script header.row .col ...

htmlcsssasscss-selectorspug

Upon clicking on another div, command it to expand to full height and width

I am encountering an issue when loading an HTML file into a content div after clicking on a menu bar option. The HTML file contains 5 tables, but the div only displays the first 5 lines of the first table before requiring a scroll bar to view the rest of t ...

javascripthtmlcss

Troubleshooting Error: Running 'createsuperuser' command in Visual Studio Command-line with Django

Hello, My goal is to utilize Python 3.7 and Django 2.1 within Visual Studio. After creating a new Django project using Visual Studio, the result is a Python-Django project. However, upon attempting to execute the 'createsuperuser' command via ...

pythondjangobootstrap-4

JavaScript: Show Loading Screen until certain assets are fully loaded

Just a quick overview. I currently have a loading screen that appears before the website finishes loading for a specified time. What I'm looking to achieve is a method to check if certain elements are loaded and then remove the loading screen, rathe ...

javascriptjqueryhtmlcss

Creating PNG images in a scripting language for web applications

Imagine giving your website user the ability to specify a radius size, let's say 5px, and in return receiving a PNG file with a circle of that radius. This question can be divided into two sections: In what language and using which technologies can ...

javascripthtmlcssimage-processingpng

Close the tooltip automatically after a set period

Looking to create an effect where a tooltip appears when hovering over an element and then disappears after a few seconds, even if the mouse is still on the element. Here is my current code: <div data-sentence-tooltip="yes" data-tooltip-content: "some ...

javascriptjqueryhtmlcss

What are the steps to create a dynamic background color effect for an element?

I'm having trouble cycling through different colors or background images. The code I tried only runs once and doesn't loop as expected. .landing-background { background-color: red; -webkit-animation-name: example; /* Chrome, Safari, Oper ...

htmlcss

Using HTML and CSS, design a customizable tick box without explicitly utilizing the 'checkbox' element

Check out this code snippet (and yes, I'm using a basic reset.css): .checkbox { border: 1px solid black; width: 10px; height: 10px; } <ul> <li> <p><div class="checkbox"></div>I agree!</p> </li&g ...

htmlcsscheckboxinline

What is the reason behind lightbox not disabling scrolling?

While using the default lightbox2 CSS and JavaScript, everything is functioning correctly except for an issue on Safari mobile. When I click an image and the lightbox opens, swiping to the left reveals blank white space despite having overflow-x set to hid ...

javascripthtmlcsslightboxlightbox2

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

Preserve the original color of links in CSS by using the `a

Is it feasible to specify in CSS that a link should not change its color and instead use the default one? For example: If I have text displayed in red, and that text is also a hyperlink. Typically, when clicked on, the text would change to blue because i ...

htmlcsshyperlink