WordPress.org

Ready to get started?Download WordPress

Forums

[closed] How Adjust width of Navigation Bar (14 posts)

  1. InfluenceHaus
    Member
    Posted 1 year ago #

    http://antonlegal.com/
    When I add menu items like "Contact" it makes a second row. How do I adjust the width of the menu bar in the CSS. So all buttons are on one row. I assume its in this part of code but not sure.

    /* level 1 menu */
    ul#dropdown-menu{ list-style:none; margin-bottom:0; }
    ul#dropdown-menu li{ float: left; }

    ul#dropdown-menu li a{ display: block; padding:20px 0 20px 0; margin-right:30px; border-top:1px solid #efefef; margin-top:-1px;
    color:#666; font-family: 'Open Sans', sans-serif; text-transform:uppercase; }
    ul#dropdown-menu li.last > a{ padding-right:0; }

    ul#dropdown-menu li.hover, ul.dropdown-menu li:hover{ position: relative; text-decoration:none; }

    ul#dropdown-menu li.hover a{ text-decoration:none; color:#333; } /* LEVEL 1 menu item styling ON HOVER */
    ul#dropdown-menu li.current > a{ color:#333; border-top-color:#0055a5; } /* styling of LEVEL 1 menu item that is current */

    /* level 2 menu */
    ul#dropdown-menu ul{ width:170px; position:absolute; top:100%; left:-10px; list-style:none; display:none;
    background-color:#ffffff; border:1px solid #efefef; z-index:15; padding:5px 0; }

    ul#dropdown-menu ul li{ width:140px; padding:0 15px; }

    ul#dropdown-menu li .sub-menu li > a{ width:140px; display: inline-block; border:none; border-bottom:1px solid #f0f0f0; padding:10px 0; /* LEVEL 2 menu element styling

  2. Code Metic
    Member
    Posted 1 year ago #

    Since your menu is being wrapped by .col655 css class which can be found at style.css line 158 .col655{ width:655px; float:left; margin-right:20px; }.

    What you must do is to add another class for your menu div just below the id menu-header-wigdet-2. Add another styling in your style.css file that corresponds your label in menu.

    Maybe like this.

    header.php

    <div class="col655 menu-wrap">
        <ul>
            <li>
            ...
        </ul>
    </div>

    style.css
    .menu-wrap {
    width: 100% !important;
    }

  3. InfluenceHaus
    Member
    Posted 1 year ago #

    Im still confused. Do I paste the following under menu-header-wigdet-2?
    header.php
    <div class="col655 menu-wrap">

    • ...

    </div>

  4. InfluenceHaus
    Member
    Posted 1 year ago #

    where exactly under menu-header-wigdet-2 do I paste this?

    .menu-wrap {width: 100% !important;}

  5. Code Metic
    Member
    Posted 1 year ago #

    Nope. What i only added there is the word menu-wrap as a class for your div menu.

    Then this one

    .menu-wrap {
    width: 100% !important;
    }

    Paste it in your style.css

    That's to easy if you know how to code.

  6. InfluenceHaus
    Member
    Posted 1 year ago #

    I am new to coding. Sorry. Having trouble. I have the style.css open but pasting
    .menu-wrap {
    width: 100% !important;
    }

    or
    header.php
    <div class="col655 menu-wrap">

    • ...

    </div>
    style.css
    .menu-wrap {
    width: 100% !important;
    }

    Does nothing to change the width of nav menu buttons

  7. Code Metic
    Member
    Posted 1 year ago #

    in style.css just paste this additional code

    .menu-wrap {
    width: 100% !important;
    }
  8. Code Metic
    Member
    Posted 1 year ago #

    for your html just add menu-wrap beside col655(dont forget for space).

  9. InfluenceHaus
    Member
    Posted 1 year ago #

    Nothing happens. I pasted it like 5 places in style.css
    .menu-wrap {
    width: 100% !important;
    }
    including menu-header-wigdet-2

    Why is the HTML code I see from "view page source" different than what I see in CSS?

  10. Code Metic
    Member
    Posted 1 year ago #

    Ok.

    At the root directory of your site. Access the
    /wp-content/themes/complete-wp/style.css, then add this .menu-wrap {
    width: 100% !important;
    }

    For your html
    Access
    /wp-content/themes/complete-wp/header.php, then add this menu-wrap beside col655 that may look like this

    <div class="col655 menu-wrap">
  11. InfluenceHaus
    Member
    Posted 1 year ago #

    SUCCESS
    Thanks :)

  12. Code Metic
    Member
    Posted 1 year ago #

    Mark resolve now.

  13. skillbook51
    Member
    Posted 1 year ago #

    Hey Code Metic, can you help me? I added the code to my style.css doc, but my header.php file doesn't look at all like InfluenceHaus. Where do I put the <div class="col655 menu-wrap"> (or whatever code I need there?) Here's my site: http://www.librarianskillbook.com/

    [code deleted]

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @skillbook51 - please start a new thread per http://codex.wordpress.org/Forum_Welcome#Where_To_Post.

    CSS is entirely theme/site specific, so code from another thread on a different theme is not going to work.

Topic Closed

This topic has been closed to new replies.

About this Topic