Results 1 to 2 of 2

Thread: Changing position of menu items in wider header

  1. #1
    Join Date
    Jul 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing position of menu items in wider header

    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):
    HTML Code:
    <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:
    Code:
    .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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Anylink CSS v2.2 - Menu items changing colors in IE
    By BelowZero in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-21-2009, 01:59 PM
  2. Resolved Smooth Menu - changing position causes submenu problem in IE
    By dmshep99 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-11-2009, 10:51 AM
  3. Direct link of the header items
    By derMatze in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-01-2008, 10:14 PM
  4. Problem in IE7 when changing the menu position from left to right
    By Maher4Ever in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 09-25-2008, 06:43 AM
  5. changing position for drop down menu
    By Jessica in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-18-2007, 04:09 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •