Click here to Skip to main content
14,875,113 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have navbar with some links on the left , logo on the center and other links on the right and working fine on big screens but when i see it on mobile version after i click the toggle button the links on the right not showing
the left links are on ul tag like this
HTML
<ul  class="nav navbar-nav me-auto left"></ul>

the right links are on ul tag like this
HTML
<ul class="nav navbar-nav ms-auto right"></ul>

and all of them are under this div
HTML
<div class="collapse navbar-collapse " id="navbarTogglerDemo03"></div>


What I have tried:

HTML
<nav id="navb" class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class=" top-bar"></span>
            <span class="middle-bar"></span>
            <span class=" bottom-bar"></span>
            </button>
            
            <a class="navbar-brand" href="">
                <img src= "{{asset('images/black.png')}}" alt="" /> 
            </a>
            
            <div class="collapse navbar-collapse " id="navbarTogglerDemo03">
                <ul  class="nav navbar-nav me-auto left">
                    <li class="nav-item ">
                        <a class="nav-link" href="">Home</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="">About Us</a>
                    </li>
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"  id="navbarDropdown"             role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Products
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            @foreach($categories as $category)                                
                            <li class="dropdown-submenu">
                                <a class="dropdown-item dropdown-toggle" href="#">{{$category->name}}</a>
                                                
                                <ul class="dropdown-menu">
                                    @foreach($subcategories as $subcategory)
                                        @if($subcategory->category_id == $category->id)
                                            <li class="d-block">
                                            <a class="dropdown-item" href="">
                                            {{$subcategory->name}}</a></li>
                                        @endif
                                    @endforeach
                                </ul>
                            </li>
                            @endforeach
                        </ul>           
                    </li>

                    <li class="nav-item ">
                        <a class="nav-link" href="">Contact Us</a>
                    </li>          
                </ul>

                <ul class="nav navbar-nav ms-auto right">
                    @if(Auth::check())
                        @if(Auth::user()->admin==1)
                        <li class="nav-item">
                            <a class="nav-link" href="">Products</a>
                        </li>
                                    
                        <li class="nav-item">
                            <a class="nav-link" href="">Categories</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link" href="">SubCategories</a>
                        </li>
                         
                        <li class="nav-item">
                            <a class="nav-link" href="">logout</a>
                        </li>
                        @endif 
                    @endif    
                </ul>
            </div>
                    
                
        </div>
    </nav>


CSS
.navbar a.navbar-brand {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  
}

@media screen and (max-width: 850px) {
  .navbar a.navbar-brand {
    margin-top: 5px;
    vertical-align: top;
  }
.navbar .navbar-nav {
    margin-top: 40px;
    height: 100vh;
  }
}


but when i remove the second ul tag for the right links
HTML
<ul class="nav navbar-nav ms-auto right"></ul>
and add the links with the other left links in the first ul tag above them >>
HTML
<ul  class="nav navbar-nav me-auto left"></ul>

they appear in the navbar when it collapse idon't know why.
but i want the other links to be on the right
Posted
Updated 20-Mar-21 7:30am

1 solution

the problem was here
CSS
.navbar .navbar-nav {
    margin-top: 40px;
    height: 100vh;
  }

the height set to 100vh so the other links were hidden since each group of links were under .navbar-nav class so each one has height 100vh
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900