Need help? Check out our Support site, then

reduce navigation bar thickness

  1. Hi!

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

    The blog I need help with is

  2. 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;
  3. 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

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

  5. ? 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.

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

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

Topic Closed

This topic has been closed to new replies.

About this Topic