Adjust Navigation Menu Bar height

  • Resolved sunilsah123

    (@sunilsah123)


    7 years, 2 months ago

    I am using primer theme.
    Can i adjust height of the navigation bar?
    Is it possible to adjust the page title bar as well? and add a different background with title bar?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @sunilsah123,

    You’ve not provided a link to your site, but going off a test site that I have setup I’ll answer your questions in order.

    1) Yes, you can adjust the height of the navigation bar by using the following CSS:

    .main-navigation-container {
   height: 75px;
}

    But keep in mind that you’ll need to tweak the height of the navigation at certain break points for mobile devices. And you may also need to adjust the CSS for child elements to account for the new height.

    Or to avoid having to tweak child elements after hardcoding a height value for the navigation, you could tweak the padding of the menu anchor elements:

    .main-navigation a {
   padding: 2rem 1rem
}

    Note: The first value (2rem) is the top/bottom padding.

    2) You can also tweak the height of the page title by adjusting the padding of the h2 element with the class .page-title, inside of the .page-title-container element.

    .page-title {
   padding: 5% 1rem;
}

    Note: The first value (5%) is the top/bottom padding.

    3) You can tweak the CSS of the element .page-title-container to adjust it’s background color.

    #page > .page-title-container {
   background-color: #66c8ff;
}

    Evan

Viewing 1 replies (of 1 total)
  • The topic ‘Adjust Navigation Menu Bar height’ is closed to new replies.