Changing position of menu items in wider header

[chrscote]

I am creating a page that has a header which contains an image which had been crossing over the height of the header. I have figured out how to change the size of the header so this won't happen. However, the menu items are appearing at the top of the header area. I can't remember which element I need to change in the CSS to move the menu items down. I am using Bootstrap with the fixed header position. Here is the HTML code for the header (nav):

<nav class="navbar navbar-default navbar-fixed-top"> 
            <div class="container"> 
                <div class="navbar-header"> 
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
                        <span class="sr-only">Toggle navigation</span> 
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span> 
                    </button>                     
                    <a class="navbar-brand" href="#"> 
                        <img src="images/logoSmall.png"> 
                        <caption>Handmade for Finest Quality</caption>                         
                    </a>                     
                </div>                 
                <div id="navbar" class="collapse navbar-collapse"> 
                    <ul class="nav navbar-nav text-right"> 
                        <li class="active"> 
                            <a href="#">Home</a> 
                        </li>                         
                        <li> 
                            <a href="#about">About</a> 
                        </li>                         
                        <li> 
                            <a href="#contact">Contact</a> 
                        </li>                         
                        <li class="dropdown"> 
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
                            <ul class="dropdown-menu"> 
                                <li> 
                                    <a href="#">Action</a> 
                                </li>                                 
                                <li> 
                                    <a href="#">Another action</a> 
                                </li>                                 
                                <li> 
                                    <a href="#">Something else here</a> 
                                </li>                                 
                            </ul>                             
                        </li>                         
                    </ul>                     
                </div>                 
                <!--/.nav-collapse -->                 
            </div>             
        </nav>

And here is the CSS I'm using to display the header's height:

.navbar-default
{
    background-color: #f8f8f8;
    border-color: #e7e7e7;
    height: 110px;
}
    .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse
    {
        padding-right: 0;
        padding-left: 0;
        height: 110px;
        vertical-align: bottom;
    }

I have tried moving the vertical-align:bottom into different classes, but have yet to figure out the correct class to add this to. Any and all help would be greatly appreciated. Please, no raving about using Bootstrap instead of something else.

Chris

[Beverleyh]

At present, with the information you've provided, you're relying on somebody's familiarity with Bootstrap in order to offer assistance. Unfortunately, even with knowledge of the Bootstrap framework, it's very difficult to imagine it all working together from thin air.

If you create a reduced case example that contains just the pertinent markup and CSS (just enough to demonstrate the problem) many more people might be able to offer assistance... And not just the folks familiar with Bootstrap.