I have problem with bootstrap navbar link when it shows on small devices. Here is my template :

Last item will be shows in 2 line

CodePudding user response：

Please share your HTML code first, but it seems you didn't consider breakpoints in your navbar. To fix this issue, you can use the Bootstrap class "navbar-expand-sm" or "navbar-expand-md" on the navigation bar element, depending on the desired breakpoint. This will cause the navigation bar to toggle between the expanded and collapsed states based on the screen size. You can also add the "navbar-nav" class to the unordered list inside the navigation bar to format the list items as a horizontal navigation bar.

CodePudding user response：

Here is my css :

header nav ul.navbar-nav {
    padding: 0 !important;
}

header nav ul.navbar-nav > li.menu-item {
    display: flex;
    margin: 0 0 0 40px;
    font-size: 20px;
}

header nav ul.navbar-nav > li.menu-item > a {
    display: inline-block;
    padding: 0 !important;
    color: #fff;
}

<div id="navbar" ><ul id="menu-menu-1" ><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-181" ><a title="گلفیلد" href="https://golfield.ir/"  aria-current="page">گلفیلد</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-183" ><span><img src="https://golfield.ir/wp-content/themes/golfield2/assets/images/icons/down.svg"></span><a title="محصولات" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  id="menu-item-dropdown-183">محصولات</a>
<ul  aria-labelledby="menu-item-dropdown-183" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-184" ><a title="باکس گل" href="https://golfield.ir/product-category/باکس-گل/" >باکس گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-187" ><a title="دسته گل" href="https://golfield.ir/product-category/دسته-گل/" >دسته گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-189" ><a title="سبد گل" href="https://golfield.ir/product-category/سبد-گل/" >سبد گل</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-188" ><a title="دیش گاردن" href="https://golfield.ir/product-category/دیش-گاردن/" >دیش گاردن</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-186" ><a title="جام شیشه ای" href="https://golfield.ir/product-category/جام-شیشه-ای/" >جام شیشه ای</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-185" ><a title="تنگ شیشه ای" href="https://golfield.ir/product-category/تنگ-شیشه-ای-گل/" >تنگ شیشه ای</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-404" ><a title="گل و شکلات" href="https://golfield.ir/product-category/گل-و-شکلات/" >گل و شکلات</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-192" ><a title="گل و بادکنک" href="https://golfield.ir/product-category/گل-و-بادکنک/" >گل و بادکنک</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-194" ><a title="گل و عروسک" href="https://golfield.ir/product-category/گل-و-عروسک/" >گل و عروسک</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-285" ><span><img src="https://golfield.ir/wp-content/themes/golfield2/assets/images/icons/down.svg"></span><a title="مناسبت ها" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  id="menu-item-dropdown-285">مناسبت ها</a>
<ul  aria-labelledby="menu-item-dropdown-285" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-278" ><a title="گل تولد" href="https://golfield.ir/product-category/گل-تولد/" >گل تولد</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-279" ><a title="گل ترحیم" href="https://golfield.ir/product-category/گل-ترحیم/" >گل ترحیم</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-317" ><a title="گل نوزاد" href="https://golfield.ir/product-category/گل-نوزاد/" >گل نوزاد</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-310" ><a title="گل روز مادر" href="https://golfield.ir/product-category/گل-روز-مادر/" >گل روز مادر</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-309" ><a title="گل روز پدر" href="https://golfield.ir/product-category/گل-روز-پدر/" >گل روز پدر</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-302" ><a title="گل شب یلدا" href="https://golfield.ir/product-category/گل-شب-یلدا/" >گل شب یلدا</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-303" ><a title="گل عید نوروز" href="https://golfield.ir/product-category/گل-عید-نوروز/" >گل عید نوروز</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-304" ><a title="گل کریسمس" href="https://golfield.ir/product-category/گل-کریسمس/" >گل کریسمس</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-305" ><a title="گل هالووین" href="https://golfield.ir/product-category/گل-هالووین/" >گل هالووین</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-308" ><a title="گل ولنتاین" href="https://golfield.ir/product-category/گل-ولنتاین/" >گل ولنتاین</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-182" ><a title="تماس با ما" href="https://golfield.ir/تماس-با-ما/" >تماس با ما</a></li>
</ul></div>

CodePudding user response：

Seem fine, but maybe the problem is coming from the parent item of the menu, for example, if the parent div (bootstrap col) of the navbar is smaller than the navbar this issue happens. So check the parent item width and make that with the bootstrap breakpoints. for example, it's working on the same column in the desktop size you didn't expect in works on the mobile too.

eg: It's better to use breakpoint col:

<div >...</div>

and you can handle it in the smaller devices' screen sizes.

BUT if it's not your problem you add this style to your navbar:

white-space: nowrap;

or another solution can be adding this to li.menu-item class:

flex: 1;

But you should check the affect of all the scenario and their result.