Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
Like Tree1Likes
  • 1 Post By mlseim

Thread: CSS: Weebly Navigation Problems

  1. #1
    Junior Member
    Join Date
    Dec 2013
    Posts
    1
    Member #
    37905

    CSS: Weebly Navigation Problems

    Hi all! I am SLOWLY learning coding as I am editing the CSS in Weebly. However, I am stuck. I changed the height of the navigation on my website but cannot figure out how to get the wording up in the new navigation bar. Here is the website: Featured Products - My Site

    Thank you SO much!!!!

    Here is the part of code that deals with the navigation.

    #nav-wrap {
    background:url(header-footer-bg.jpg) repeat;
    height:50px;
    }

    #nav-border-top {
    background:url(nav-border-top.jpg) repeat-x top;
    }

    #nav-border-bottom {
    background:url(nav-border-bottom.jpg) repeat-x bottom;
    height:50px;
    }

    #nav-wrap .container {
    clear: both;
    position: relative;
    }

    #nav-wrap .container ul {
    list-style: none;
    float: right;
    height:100%
    }

    #nav-wrap .container ul li {
    list-style: none;
    float: left;
    height:100%;
    }

    #nav-wrap .container ul li a {
    display: block;
    font-family: 'Oswald', 'Impact', sans-serif;
    color: #fff;
    padding: 42px 15px;
    border: 0;
    outline: 0;
    list-style-type: none;
    font-size: 16px;
    text-transform:uppercase;
    text-shadow: 0px 0px 15px #fff;
    height:100%;
    }

    #nav-wrap .container ul li#active a,
    #nav-wrap .container ul li a:hover {
    color: #6036b1;
    text-shadow: 0px 0px 15px #6036b1;
    border: 0;
    background:url(nav-active-violet.png) repeat-x center bottom;
    }

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,963
    Member #
    5580
    Liked
    756 times
    I'm assuming you mean the wide space between the link text and that bar on top of it?

    It looks to me like a padding or margin issue.

    The line below - in bold ... try changing 42px to 15px and see what happens.

    #nav-wrap .container ul li a {
    display: block;
    font-family: 'Oswald', 'Impact', sans-serif;
    color: #fff;
    padding: 42px 15px;
    border: 0;
    outline: 0;
    list-style-type: none;
    font-size: 16px;
    text-transform:uppercase;
    text-shadow: 0px 0px 15px #fff;
    height:100%;
    }
    TheGAME1264 likes this.


  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,480
    Member #
    425
    Liked
    2784 times
    Max is right. You don't need anywhere near that much padding: The 42px controls your top/bottom padding. So if you set it to say 5 or 6px for the top, and remove your relative positioning, you'll be good to go.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:22 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com