Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Shorten main navi

Home Forums Support Shorten main navi

  • This topic has 10 replies, 3 voices, and was last updated 6 years ago by KEvin.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #39120
    KEvin

    Hi,

    New question: How can I shorten the main navigation block?
    It is already contained but I want it shorter than the contained option.
    Is it possible?

    #39122
    Chad Biggs

    This will change the height.
    .main-navigation {
    height: 20px;
    }

    #39131
    Tom
    Lead Developer
    Lead Developer

    Do you mean shorter length-wise?

    Where do you have it positioned?

    #39210
    KEvin

    Yea length. Not height.
    Main navi is above the page header, so at the top of the website.

    #39396
    Tom
    Lead Developer
    Lead Developer

    Hmm, maybe something like this would work..

    First, we’ll remove the background color from the navigation bar

    .main-navigation {
          background: transparent;
    }

    Then, we’ll add your background color to the inner element, and tell it to float so it doesn’t go full width:

    .main-navigation .inside-navigation {
          background:#222;
          float: left;
    }

    Let me know if that does what you’re looking for.

    #39435
    KEvin

    The main navi is shorter now yes, but it is on the left. Because of the float ofcourse. And my navi has to be in the center.
    I tried float:center but that didn’t work.
    Do you know how to set main navi in the center?

    #39599
    Tom
    Lead Developer
    Lead Developer

    Hmm, maybe try this?

    .main-navigation {
          background: transparent;
          text-align: center;
    }
    
    .main-navigation .inside-navigation {
          background:#222;
          display: inline-block;
    }
    #40872
    KEvin

    This works! Thanks again Tom!!

    #41113
    KEvin

    But… There is a small problem. I did this and it worked, but there is a very small gap between page header and main navi now.

    I have already this code in my stylesheet:

    .separate-containers .page-header-image, .separate-containers .page-header-content, .separate-containers .page-header-image-single, .separate-containers .page-header-content-single {
          margin-top: 0;

    How to remove this little space?

    #41280
    Tom
    Lead Developer
    Lead Developer

    Can you link me to the site?

    Thanks!

    #42988
    KEvin

    Never mind. I like the longer version of the main navi.
    Thanks for your help.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.