locked
adjust dropdown position with increase in navbar height. (bootstrap) RRS feed

  • Question

  • User1398839915 posted

    I have increased the navbar height to 150px and centered the navbar li. but I want my dropdown list to open right below the li but it opens below the navbar.like this

    <g class="gr_ gr_9 gr-alert gr_tiny gr_spell gr_inline_cards gr_run_anim ContextualSpelling multiReplace" id="9" data-gr-id="9">i</g> want the dropdown to open below navbar links

    Required

     Please suggest.

    .navbar {
                       
                        background: url(backdrop1.png) no-repeat;
                        background-size: cover;
                        min-height: 150px !important;
                        border-radius: 0;
                        margin-bottom: 0;
                        border-bottom: 1px solid #eee !important;
                        z-index: 500;
                    }
    
                    .navbar-brand {
                       
                        padding: 0 15px !important;
                        height: 150px;
                        line-height: 150px;
                    }
    
                        .navbar-brand > img {
                            height: 100%;
                            padding: 15px 0;
                            width: auto;
                            margin: 0 auto;
                        }
    
                    
                   .navbar-nav > li > a {
                        padding-top: 0px !important;
                        padding-bottom: 0px !important;
                        line-height: 150px;
                       
                    }
    
                    nav .navbar-toggle {
                        margin: 25px 15px 25px 0;
                        
                    }
    
                   
    
                    
    
                    .dropdown-menu {
                        
                        background-color: #4973AB !important;
                    }
    
                    @media (min-width: 768px) and (max-width: 1200px) {
                        .navbar-collapse.collapse {
                            display: none !important;
                        }
    
                        .navbar-toggle {
                            display: block !important;
                            float: right;
                        }
    
                        .navbar-header {
                            float: none;
                        }
                    }
    
                    @media (max-width: 768px) {
                        #topbar {
                            display: none;
                        }
    
                        .navbar-brand {
                            height: 100px;
                        }
    
                        .navbar-nav > li > a {
                            line-height: 20px;
                            padding-top: 10px;
                            padding-bottom: 10px;
                        }
                    }

    </div> </div>

    <nav class="navbar navbar-default" id="myNavbar">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#HomePage">
    
     
                        <img class="img-responsive" src="logo1.png" />
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
    
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="Index.html">HOME</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="">
                                NEWS/EVENTS
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Summer School</a></li>
                            </ul>
                        </li>
                        
                            </ul>
                </div>
            </div>
        </nav>

    Monday, August 20, 2018 12:02 PM

Answers

  • User1724605321 posted

    Hi Deepulu1984,

    That is the expected behavior , see template :

    https://getbootstrap.com/docs/3.3/examples/navbar/ 

    If you still need to achieve your requirement ,  you just need to adjust the 'top' value on the .dropdown-menu class, which is absolute positioned :

        .dropdown-menu {
            top: 60%;
            background-color: #4973AB !important;
        }

    Result :

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 21, 2018 3:03 AM