asked on

css nav menu

I have created a bootstrap 5 nav horozontal menu with dropdown menu's and I am trying to increase the width of the dropdown menu depending in the text is there a way to find the css class that sets the menu width like in aspx.vb you can set a breakpoint and F8 through

I have checked the classes and cannot see the width setting

<div class="container">
                <div class="row align-items-center position-relative">
                    <div class="site-logo">
                        <img class="d-inline-block align-center" src="../images/StartUpLogo.png" width="30" height="30" />
                        <a href="index.html" class="text-black"><span class="text-primary">TPA</a>
                    </div>

                    <div class="col-12">
                        <nav class="site-navigation text-right ml-auto " role="navigation">

                            <ul class="site-menu main-menu js-clone-nav ml-auto d-none d-lg-block">
                                <li class="has-children">
                                    <a href="#about-section" class="nav-link"><em class="icon-import_contacts"></em>  Import/Export</a>
                                    <ul class="dropdown arrow-top">

Open in new window

Nancy Rindone

I think the class you want for the dropdown menu is named: dropdown-menu.
https://getbootstrap.com/docs/5.1/components/dropdowns/

It looks like this class uses a min-width variable that is set to 10rem by default.

ASKER CERTIFIED SOLUTION

Nancy Rindone

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

K Feening

ASKER

I was looking in the css file didn't know about the width being automatic thanks