Centralize and confine the menu division

I have been working on creating a hover menu using CSS and Bootstrap, specifically for flex grid layouts. However, I have run into an issue where my menu is only as wide as its parent div.

Furthermore, I am struggling to center the hover menu relative to the length of each menu item. Can anyone provide guidance on how to stretch the width of my menu items to prevent text wrapping and how to center the entire menu in relation to its link?

Here is the HTML code:


<div class="d-flex flex-row">
  <div class="dropdown">
    <button class="dropbtn">Small</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">a really long Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

And here is the relevant CSS:


/* Dropdown Button */
.dropbtn {
    color: #3a3a3a;
    padding: 16px;
    font-size: 16px;
   border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: #fff;
border: 1px solid #cecece;
color:#3a3a3a;
z-index: 1;
box-sizing: border-box;
}


.dropdown-content:after, .dropdown-content:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.dropdown-content:after {
border-bottom-color: #fff;
border-width: 13px;
margin-left: -13px;
}
.dropdown-content:before {
border-bottom-color: #cecece;
border-width: 14px;
margin-left: -14px;
}




/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:$green;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
//background-color: #3e8e41;
}
htmlcss

Answer №1

Is there a way to make my menu items fill the width without wrapping onto a new line?

To prevent text from wrapping onto a new line, you can use the CSS property white-space: nowrap;. For more information, refer to the documentation here: https://www.w3schools.com/cssref/pr_text_white-space.asp

Also, how can I center the entire menu relative to its link?

To center the menu relative to its link, you can set the position to left:50% and then apply the transform property with a value of translateX(-50%) to reposition it back by 50% of its size. Add the following code to the .dropdown-content class:

left: 50%;
transform: translateX(-50%);


/* Dropdown Button */
    .dropbtn {
        color: #3a3a3a;
        padding: 16px;
        font-size: 16px;
       border: none;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
      position: relative;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #cecece;
    color:#3a3a3a;
    z-index: 1;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
}


.dropdown-content:after, .dropdown-content:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.dropdown-content:after {
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -13px;
}
.dropdown-content:before {
    border-bottom-color: #cecece;
    border-width: 14px;
    margin-left: -14px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   color:$green;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    //background-color: #3e8e41;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row">
  <div class="dropdown">
    <button class="dropbtn">Small</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

  <div class="dropdown">
    <button class="dropbtn">a really long Long Menu item</button>
    <div class="dropdown-content">
      <a href="#">Link 1 long link</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

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

Header text refuses to cooperate and center itself

Struggling to find the best way to center the "Header" text while keeping the icon in place. I've tried using text-align: center;, but it's not producing the desired results. Could anyone provide guidance on how to achieve this? Thanks. IMG: ...

htmlcss

I am confused as to the reason why this code is not functioning properly within the HTML Box Gadget on Google

I've been experimenting with Google Sites and trying to incorporate HTML and CSS without using inline styling. I followed some online guides that claimed it could be done by adding an HTML gadget and inserting the code. However, when I tried it, nothi ...

htmlcssgoogle-siteshtml-box-gadget

Obtain the CSRF token from a webpage using JavaScript

I am currently working on a project where I need to retrieve the csrf token from a web page built with Django using javascript. The structure of my HTML template is as follows: <div class = "debugging"> <p id = "csrf">{% csrf_token %}</p ...

javascripthtml

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss

Generate responsive elements using Bootstrap dynamically

I'm having success dynamically generating bootstrap elements in my project, except for creating a drop-down menu. ColdFusion is the language I am using to implement these div elements: <div class="panel panel-primary"><div class="panel-head ...

javascriptjqueryhtmltwitter-bootstrap

Acquiring the `=` symbol within email HTML

Here is the HTML that I send from my ASP.NET application: <HTML> <BODY> <img src='http://10.1.1.42:8090/EmailLogo/8aaebe52-3758-485f-8c52-7782707a4c66.jpg' /> <br/> <div style='font-family:Arial, Tah ...

htmlasp.net

How can I address the issue of an inner content scroll bar?

I am facing an issue with the scroll bar on inner content. When I hover over an arrow on the inner content, the scroll bar appears as desired. However, it changes the content in a way that looks odd. Is there a solution to have a scroll bar on the inner co ...

javascriptjqueryhtmlcss

How can we expand the functionality of bootstrap classes?

As I navigate my first steps with Bootstrap Twitter, I find myself in need of extending components. Specifically, I am looking to customize the navbar background without altering the original css file. My attempt involved creating a new class called .test ...

csstwitter-bootstrapcomponentsextend

Obtain CSS3 gradient background-color of an element using JavaScript

Currently, I am using the following JavaScript (jQuery) to retrieve the background color (in RGB) of various other div elements: $theColor = $(this).css("background-color"); This method works perfectly, except when dealing with CSS3 gradients. For insta ...

jquerycssbackgroundfindgradient

You can interact with our dropdown menu using the tab key, even when it is

We are looking to make our dropdown tabbable when expanded and non-tabbable when collapsed. We attempted using tabindex="-1" on the content inside the expandable div, but this resulted in it being non-tabbable even when expanded. Any suggestions on how t ...

javascripthtmlcssfrontend

List arranged in order with a hyperlink in the center and an image positioned on the right side

I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it. For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack. ...

htmlcss

Validation of Single Fields in Angular Reactive Forms

When I validate a reactive form in Angular, I expect the error message to show up beneath the invalid field whenever incorrect data is entered. <form (ngSubmit)=sendQuery() [formGroup]="form"> <div *ngFor='let key of modelKeys&ap ...

htmlangularformstypescriptreactive

adjust division size proportionally to another one

I am trying to create a layout with right and left divisions where the size of the left division matches the height of the browser window (100vh). The left division consists of two sub-divisions that need to have variable sizes but collectively match the ...

htmlcsstwitter-bootstrap

Is it possible to show a specific portion of an image based on its size using only CSS?

Is there a way to use CSS to display only a specific part of an image based on its width and height? If not possible with CSS alone, would TypeScript be a solution? For example, if I have an image that is 2,434px × 1,697px inside a div that is 700x700, h ...

csstypescript

Here is a step-by-step guide on creating a navigation bar with a Login and Sign Up button using Bootstrap 4

I am in the process of creating a navigation bar in bootstrap 4, which includes Login and Sign Up buttons. To get a clear idea of what I'm aiming for, please refer to the images below: https://i.sstatic.net/ibZKa.png https://i.sstatic.net/OUWsX.png ...

htmlcssnavigationbootstrap-4

Customize the appearance of Woocommerce's blockUi feature with your

During an Ajax request, blockUI adds a style to the blocks of the checkout form and cart with "background: '#fff'". However, my entire website theme is black and I do not want the background color of the blocks to be white. Is there a way to remo ...

javascriptphpcsswordpresswoocommerce

Center the panel on the page and decrease its width using Bootstrap

I recently incorporated a Bootstrap panel above a search results table - my first experience working with Panels. This panel contains a form with a select menu, allowing users to filter the list of search results based on their selections. Currently, the ...

htmlcsstwitter-bootstrap

Tips on preserving CSS modifications made in Chrome Developer Tools Inspector to .vue file

Currently, I am in the process of setting up a new workflow where my goal is to streamline my work by using the Chrome DevTools Inspector to save any CSS changes directly to my .vue file. While the DevTools Workspaces feature can achieve this, it involves ...

cssvue.jsvuejs2google-chrome-devtools

Expanding Images Using HTML and CSS

I am currently working on a memory card game using HTML, CSS, and JS as part of my practice. You can check out what I have accomplished so far right here: . Upon inspection, you may notice that the images of the question mark and the flipped card are sligh ...

javascripthtmljquerycss

Ways to transfer textbox value to another jsp page upon clicking a separate form button without relying on javascript

Here is the code snippet: <body> <input type=text name=name> <form action=new3.jsp method=post name="f1"> <input type=text name=name> <input type=submit value=next> </form> <form action=new1.jsp method=post> <i ...

htmljsp