The hamburger menu on mobile phone appears to overlap the brand logo when using the Bootstrap 4 .container class

Currently in the midst of constructing my website using Bootstrap 4.

I'm encountering an issue where the hamburger menu is overlapping the brand logo on my mobile phone view.

The culprit seems to be the .container class.

This visual anomaly can be seen here: Menu overlaps brand image.

I've attempted solutions like hiding the logo with display: none, but it hasn't resolved the problem.

Do you have any suggestions or tips on how I can address this?

Here's a snippet of the code:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <nav class="navbar navbar-toggleable-md navbar-inverse sticky-top">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#home"><img src="img/A-los-wit.png" width="50" height="36" alt="Mini logo home"></a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#home">Home<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#diensten">Diensten</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navigation -->

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This particular issue has been identified in Bootstrap 4 Alpha 6:

Find more details here

For a temporary fix (until the beta version is released), you can try this solution: 

@media (max-width: 568px) {
    .container {
        margin-left: 0;
        margin-right: 0;
    }
}

Check out this link for more information

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

Change the pseudo class "typed::after" to eliminate the element

Hey there, I need some assistance on how to target a specific element with the class .typed::after using JavaScript. The code provided below only targets classes without ::after or ::before, and the cursor is currently positioned on the after of 'type ...

javascriptjqueryhtmlcss

Tips for preventing the use of inline styling in React

I am facing an issue with some variables set at the top of my functional component that are not being used except in styles: const testWidth = 100; const testHeight = 100; Although I use some of these variables in my styles... I am considering moving my ...

javascripthtmlcssreactjsinline-styles

Incorporate Angular directives within a tailor-made directive

I just started using a fantastic autocomplete directive called Almighty-Autocomplete. However, I feel like it's missing some features. The basic structure of the directive is as follows: .directive('autocomplete', function () { var index ...

javascripthtmlangularjsangularjs-directive

The small screen @media query is malfunctioning and not displaying correctly

After creating an HTML file and CSS file, I have encountered a styling issue. When viewing the output on a larger screen, the text "I LOVE CODING, I WILL BECOME AN EXPERT." should be displayed in blue on a red background. However, on smaller screens, it ne ...

htmlcss

The high chart data is failing to load

I am brand new to highchart and have just started learning how to create a simple pie chart in HTML. Unfortunately, I am having trouble getting it to work properly. Everything seems correct to me, but for some reason, the highchart is not populating. Here ...

jqueryhtmlhighcharts

Send information from Node.js to the webpage and populate designated elements (search by either ID or class) on the webpage

After successfully retrieving data from the mongo database using nodejs, my goal is to display this data on a webpage. function requireUser(req, res, next){ //console.log(req.session.username); if (!req.session.username) { res.redirect('/user_un ...

node.jshtmlmongodbexpress

Guide on displaying only one v-menu when clicking to reveal the menu

I have implemented the v-for loop on v-menu and I am attempting to trigger the v-menu to open using only the button. My goal is to open one menu at a time when the button is clicked. Currently, all buttons are being displayed simultaneously because the v- ...

javascripthtmlvue.jsvuetify.js

The body tag mysteriously disappears after the function is called within the $().html() command

As I delve into scraping the source code of a website, I encounter an interesting phenomenon. Initially, when I print out the complete source code, everything appears as expected. However, upon attempting to print an actual DOM, I notice a slight change i ...

javascripthtmlajaxdomweb-scraping

`Select Dropdown Choice will Populate Corresponding Textfields`

While I know this question has been asked multiple times on Stack Overflow, I am looking for a more tailored solution based on my specific requirements. That is why I'm posting this question. I have an HTML form with PHP that retrieves data from an M ...

javascriptphphtmlsql-serverauto-populate

Text alignment in the horizontal direction does not function as expected within the `<span>` element in Bootstrap 4

The code snippet below is what I am currently working with: <div class="card" > <div class="card-block"> <h4 class="card-title"> <span class="text-left"> ...

htmlcsstwitter-bootstrapbootstrap-4

Uploading and previewing multiple images on a canvas

After successfully creating single upload for images and placing them on canvas as seen in http://jsfiddle.net/StJnY/, I am now looking to adapt the script for multiple image uploads. Here is how I plan to modify the script: JS : $(function () { $(&a ...

javascripthtmljqueryjquery-eventsfilereader

Tips for implementing X-XSS-Protection: 1; mode=block in HTML

I'm struggling with where to place this piece of code in my existing code. Should it be added to the header section? <head> <meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" /> <title> ...

javascripthtmlsecuritymeta

Making Adjustments to the Padding of Main Content Column in Typo3 Using Bootstrap Package

As the administrator of our local sports club's homepage, I oversee svwalddorf.de, powered by typo3 10.4.22 with bootstrap package 11.0.3. The current bootstrap template creates excessive empty space around the centered content area as shown here. Th ...

cssbootstrap-4typo3padding

Eliminating table rows using jQuery

In order to remove table rows from the table below: <div id="tabel"> <table class="tg"> <thead> <tr><td colspan=3>How can I delete rows from a table using jQuery</td></tr> <t ...

jqueryhtmlhtml-table

Ways to ensure that an inner div causes the outer div to shift downward

Imagine I have a div. Within this div, there are two divs positioned side by side with the float left property. The div on the left is designated for an image. However, if the image is too tall, it does not expand the outer div to accommodate it. Instead ...

csstemplates

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

javascriptcssreactjsmaterial-ui

Tips for fixing the AnguarJS $injector:modulerr problem (more information provided)

Lately, I've been struggling with implementing custom directives for my web application. Upon checking the JS console in Chrome, an error message pops up saying Failed to instantiate module w2l-direc due to: {1}. It appears that there may be an issue ...

javascriptangularjstwitter-bootstrapdependency-injection

I am having trouble getting the jsTree ajax demo to load

I am having trouble running the basic demo "ajax demo" below, as the file does not load and the loading icon continues to churn. // ajax demo $('#ajax').jstree({ 'core' : { 'data' : { ...

javascripthtmlajaxjstree

Unable to get Bootstrap 4 to function properly with Rails 5

Struggling to get Bootstrap to load properly in my Rails 5 application. I mistakenly used a subpar product called "Rapid Rails Themes (Dressed Ives)" which caused chaos in my app. After removing the theme, now facing challenges with loading Bootstrap corre ...

ruby-on-railsbootstrap-4

The multi-item carousel slider in Bootstrap 4.0.0 pen is experiencing issues when integrated with Bootstrap 4.5.3

After searching extensively, I finally stumbled upon a multi-item carousel compatible with bootstrap 4 that meets all my requirements: It is completely responsive (displaying only one item on smaller screens) It features animations <div class="co ...

jquerybootstrap-4carousel