Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to fit the menu bar and footer in any size of laptop and pc?

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #171540
    web_editor
    Participant

    How to fit the width of menu bar and footer in any screen size of laptop and pc? The size of menu bar and footer is fit in laptop when I check it but when I try to check it in pc it’s not fit anymore, the menu bar and footer is longer that the normal size of it. Please help me. Thanks!

    Menu bar css script:

    .main-navigation {
        clear: both;
        font-weight: 300;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        position: relative;
        text-align: center;
        border-bottom: 3px solid #e92121;
        background: #ff0000;
        width: 80%;
        margin: 0 auto;
    }
    .main-navigation .ak-container{
        padding:0 !important;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .main-navigation li {
        display: inline-block;
        position: relative;
        line-height:43px;
        font-size:18px;
        text-transform: initial;
        color:#ababab;
        white-space: nowrap;
    }
    .main-navigation.menu-right{
        text-align: right;
    }
    .main-navigation.menu-center{
        text-align: center;
    }
    .main-navigation.menu-right li{
        margin-left: 25px;
        margin-right:0;
    }
    .main-navigation.menu-center li{
        margin-left: 12px;
        margin-right:12px;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #FFF;
        padding: 0 18px
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        position: absolute;
        z-index: 99999;
        background: #FFF;
        top: 100%;
        border-bottom: 3px solid #e92121;
        border-top: 3px solid #e92121;
        transition:all 0.3s ease-in-out;
        -moz-transition:all 0.3s ease-in-out;
        -webkit-transition:all 0.3s ease-in-out;
    }

    HTML Code of menu bar:

    <nav id="site-navigation" class="main-navigation menu-left">
                <div class="ak-container">
                    <h1 class="menu-toggle">Menu</h1>
    
                    <div class="menu-menu_list-container"><ul id="menu-menu_list" class="menu"><li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-860"><a href="http://66.147.244.92/~homecre1/">Home</a></li>
    <li id="menu-item-861" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-861"><a href="http://66.147.244.92/~homecre1/about-us">About Us</a></li>
    <li id="menu-item-865" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-865"><a href="http://66.147.244.92/~homecre1/for-retailers">For Retailers</a></li>
    <li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-862"><a href="http://66.147.244.92/~homecre1/careers">Careers</a></li>
    <li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-864"><a href="http://66.147.244.92/~homecre1/loans">Loans</a></li>
    <li id="menu-item-863" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-863"><a href="http://66.147.244.92/~homecre1/payments">Payments</a></li>
    <li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-866"><a href="http://66.147.244.92/~homecre1/contacts">Contacts</a></li>
    </ul></div>         </div>
            </nav>
    #171564
    Paulie_D
    Member

    Could you make a Codepen.io example please instead of a codedump?

    However, you need might start with remove the width of 80% from .main-navigation and moving it to .main-navigation ul.

    Then center .main-navigation ul by changing the margin to margin: 0 auto;

    This will make the navbar 100% wide but still maintain the width of the ul inside it.

    Is that what you meant?

    Otherwise, you’ll have to look into media queries.

    #171606
    web_editor
    Participant

    I don’t want the navbar to be in 100% wide. I want to maintain the width that I specify.

    Here’s the codepen.io

    #171607
    __
    Participant

    How to fit the width of menu bar and footer in any screen size of laptop and pc?

    This sounds like you want it 100% width.

    I want to maintain the width that I specify.

    It already does. You specified a width of 80%. (assuming no user-scaling on mobile), on a 1000px wide screen, the menu bar is 800px wide; on a 100px screen, it is 80px wide.

    Perhaps you can explain more clearly what it is you’re trying to accomplish?

    #171608
    web_editor
    Participant

    Yes, i specified the width, but when I view the site in a large monitor, the menu bar and footer is become wider

    #171618
    Paulie_D
    Member

    Yes, i specified the width, but when I view the site in a large monitor, the menu bar and footer is become wider

    Well of course it does!

    width: 80%; means exactly that…80% of the monitor width. What else did you expect?

    If you want to maintain a fixed width you have to define it in a px related property (px, em, rem etc.).

    Actually, you could define the fixed value as a max-width and still use a % width generally and have the best of both worlds.

    #171667
    __
    Participant

    Yes, i specified the width, but when I view the site in a large monitor, the menu bar and footer is become wider

    Well of course it does!

    Absolutely. This is what I described above. For example, 800px is 80% of 1000px, and 80px is 80% of 100px.

    If you measure in pixels, 800px is wider than 80px… but you’re not measuring in pixels; you’re measuring in percentages. 80% and 80% are the same size.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.