Create a responsive design by using Bootstrap columns with an overflow container

I have the following code snippet:

<nav class="hhc-navbar-noshadow  navMasterPageAgency">
    <div class="container container-nav-master-page-agency ">
        <div class="row w-100 align-items-center" >
            <div class="row col-12">
                <div class="col-1" style="min-width:120px;max-width:120px;width:120px"></div>
                <div class="col-8 d-flex align-items-center nav-master-page-agency-links">
                    <a  class="item-menu-famille-metier f1"  href="#" >Link1</a>
                    <a  class="item-menu-famille-metier f2"  href="#" >Link2</a>
                    <a  class="item-menu-famille-metier f3"  href="#" >Link3</a>
                </div>
            </div>
                         
            <div class="row col-lg-1 col-xl-2 pageNameTitle">
                    <div class="logo-ma-team accueil" >
                        <img src="unsplash.it/450/150" />
                    </div>
            </div>
        </div>
    </div>
</nav>

.navMasterPageAgency {
    background: #F6F8FF 0% 0% no-repeat padding-box;
    width: 100% !important;
    height: 130px
}
.nav-master-page-agency-links {
    background: #FFF 0% 0% no-repeat padding-box !important;
    height: 40px;
}

The nav-master-page-agency-links should be positioned at the top with a #FFF background color, and the rest of the content should follow beneath it with another color.

The issue is that the nav-master-page-agency-links is within a container, preventing me from making the #FFF background span the entire width of the page while also maintaining its position relative to the logo-ma-team accueil class.

Although changing to container-fluid partially solves the problem, the alignment of the remaining page content with the logo is compromised due to being contained rather than fluid.

https://i.sstatic.net/rPU2n.png Any suggestions or assistance would be greatly appreciated. Thank you.

htmlcssbootstrap-4

Answer №1

It appears that the question is about aligning content to the left side and making the .nav-master-page-agency-links span the full width of the webpage.

This solution should solve the issue:

Explanation: By enclosing the containers within a 

<div class="bg-colorName"></div>
, I have ensured that it occupies 100% of the outer container, which is 
.container-nav-master-page-agency
. This ensures that the color extends across the entire page and adjusts the content within the .container.

.nav-master-page-agency-links {
  height: 40px;
}

.bg-violet {
  background: #F6F8FF 0% 0% no-repeat padding-box;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b3a9b7a9b7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="hhc-navbar-noshadow  navMasterPageAgency">
  <div class="container-nav-master-page-agency">
    <div class="bg-white">
      <div class="container">
        <div class="row">
          <div class="col-8 d-flex justify-space-between flex-row align-items-center nav-master-page-agency-links">
            <a class="item-menu-famille-metier f1" href="#">Link1</a>
            <a class="item-menu-famille-metier f2 ml-3" href="#">Link2</a>
            <a class="item-menu-famille-metier f3 ml-3" href="#">Link3</a>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-violet py-5">
      <div class="container">
        <div class="row col-lg-1 col-xl-2 pageNameTitle">
          <div class="logo-ma-team">
            <img class="img-fluid" src="https://icons-for-free.com/download-icon-placeholder-1320568685473343206_128.ico" />
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

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

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

htmlcssflexbox

Any ideas on how to align the links in the navbar at the center of the image instead of having them at the top?

<!DOCTYPE html> <html> <head> <title>Funky Munky Arcade</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha ...

htmlcsstwitter-bootstrap

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

csscss-float

Tips for creating an expandable div with floated content

I am looking to create a flexible div that expands based on its content. Inside this div, there are two floated left divs with fixed widths. These inner divs should also expand according to their text content. To clear the floats, there is another div wi ...

htmlcsscss-floatcss-position

Displaying a DIV inside an embedded DIV when selecting an option in HTML by utilizing JavaScript

My goal is to create a page where users initiate a questionnaire by clicking START in a web form - this action will open the DIV for the first question. As users answer each question (with yes/no choices), it will either display a specific DIV related to ...

javascriptjqueryhtml

Are the nav, footer, header tags not functioning correctly?

Hi everyone, I'm a newcomer to StackOverFlow! I have a question about the necessity of tags like Nav, footer, header, etc. Do they serve any purpose other than indicating what each section is about? I've heard they might be good for SEO rankings ...

htmlcsstagsnavbarsemantics

data not being transferred successfully to the SQL input from forms

The data from this input form is not being properly transferred to the SQL database when using the sqlAddUser.php file available at pastebin.com/W9BH0D3s. The form includes the following fields: <form action="sqlAddUser.php" method="post"> <div c ...

phphtmlmysqlforms

Experiencing problems with website loading due to jquery?

Recently, I've been experiencing slow loading times on my website . It's taking about a minute for the site to load properly, but strangely, if I click on the stop loading button, the site loads instantly. Does anyone have any insight into what ...

javascripthtmlcssweb

Branding image from Bootstrap overlapped with a container situated below the navigation bar

I'm having trouble adding a 400 x 100 png logo as a Navbar Brand image in Bootstrap 5. The logo is appearing too large, and even when I try to resize it, it still overlaps the black container and text input box below the Navbar in desktop view. On mob ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

What is the correct way to have a javascript function trigger a button click after the function has been completed?

My goal is to create a button that will close the current container and then automatically click the next button. Although I attempted to use document.getElementById("rnaMedium").click();, it did not yield the desired results. function disableLowHigh(){ ...

javascripthtmlfunction

Avoid using CSS styles when accessing the website from China

There seems to be an issue with one of our websites. Visitors from China are viewing the site without the CSS files, only the HTML. What could be causing this? Why is it only happening in China? Could there be restrictions in place, possibly for JavaScri ...

javascriptcss

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

htmlcssanimationfullscreen

Issue with X overflow visible at the right edge of the webpage (Vue.js and Tailwind CSS)

RESOLVED There is a strange white overflow on the right side of my responsive website that appears and becomes smaller as I scroll down the page. I can't seem to figure out why this is happening. None of the elements are overflowing into that space. ...

cssvue.jsresponsive-designtailwind-css

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...

htmlcsslayoutalignment

Exploring the Difference Between :nth-child(even|odd) and :nth-child(int) CSS Selectors

Encountering a challenge with the CSS :nth-child pseudo selector and suspecting that something crucial has been overlooked. index.html <html> <head>...</head> <body> <div class='selector'>first</di ...

htmlcsscss-selectors

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

javascriptjqueryhtmlcss

Display a pair of distinct items side by side on a webpage

When needing to display information in the format below: Reason : reason number 1 reason number 2 reason number 3 Code : code number Remarks : remark In this scenario, Reason, Code, and Remarks serve as headings enclosed in <s ...

htmlcssangular

Only implement $(document).on(...) for every JQuery request

As someone new to Jquery, I'm facing challenges in grasping its functionality. Specifically, my struggle lies in setting up an event listener on an i element with the class of .dataPickerIcon, which should respond to a click by inserting more HTML usi ...

javascriptjqueryhtml

Step-by-step guide to accessing a PDF file stored locally using Angular2 and HTML5

I am attempting to access a .pdf file in local storage using an iFrame. Here is the code I have tried: In HTML file <object [data]="sanitizer.bypassSecurityTrustResourceUrl(selectedItem.FilePath)" type="application/pdf"> <iframe [src]="sanitizer ...

javascripthtmlangulartypescriptiframe

Ensuring the authenticity of user login credentials

I have a form in my HTML where the user needs to input their name and password. <html> <body> <form action="welcome.php" method="post"> Name: <input type="text" name="name"><br> Password: <input type="text" name="password ...

phphtml