reduce navigation bar thickness

  • Author
    Posts
  • #1339267

    hobnobnoor
    Member

    Hi!

    How can I reduce my navigation bar thickness?it appears to me very thick.

    The blog I need help with is letstrycreating.com.

    #1339398

    justpi
    Member

    That depends on the vertical padding of the menu links. So add this and play with the first value:

    .navigation-main a {
        padding: 0.6em 1em;
    }

    (The 0.6 I’m suggesting is significantly lower than the default: default is 1em.)

    Naturally this won’t change the blue parts of the ribbon. So, after you settle on the padding you prefer, locate this addition of yours and decrease the border em value:

    .navigation-main:before, .navigation-main:after {
        border: 1.4em solid #87CEEB;
        bottom: 0;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    By the way, when you change something, you add only the relevant properties and values. The above code should be just this – the rest are superfluous:

    .navigation-main:before, .navigation-main:after {
        border: 1.4em solid #87CEEB;
    }

    #1339421

    hobnobnoor
    Member

    was able to change the navigation bar size as per to the command however unable to change the ribbon edges on the navigation bar as per the instructed command above
    ..help???

    #1339424

    hobnobnoor
    Member

    I figured that out and managed to change the edges size as well…Thank you for your support :)

    #1339491

    justpi
    Member

    ? You’re welcome, but you haven’t added what I suggested. Your menu is still “thick”, and you added something else that deformed the edges of the ribbon.

    #1339502

    hobnobnoor
    Member

    Yes I decided to get rid of the ribbons now…so I am wondering now after deleting the ribbon command it still appears on my CSS???

    however the navigation bar size is changed now its thinner…you must have checked it while I was in the process of changing the thickness.

The topic ‘reduce navigation bar thickness’ is closed to new replies.