Center Header Menu w/ Custom Logo

  • Resolved rbeaupre

    (@rbeaupre)


    8 years, 4 months ago

    I’m using the Ascension theme.

    My problem is that on desktop the menu appears to align with the top portion of the custom logo and then on tablet drops below the custom logo.

    What do I need to edit in the css to center the menu with the custom logo across devices?

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Evan Herman

    (@eherman24)

    8 years, 4 months ago

    Hi @rbeaupre,

    You can tweak the CSS for the custom logo on tablet devices by using the following bit of code:

    @media only screen and (max-width: 978px) and (min-width: 40.063em) {
   .site-header .site-title-wrapper {
     float: none;
     display: block;
     text-align: center;
   }

   .main-navigation {
    float: none;
    display: inline-block; 
   }

   .main-navigation-container {
     float: none;
     display: inline-block;
     width: 100%;
     text-align: center;
   }
}

    The above snippet will center the logo and the navigation on tablet size screens. You may want to tweak some of the values to work a bit better for you, but that should be a decent starting point.

    You can add the above CSS snippet to your themes ‘Additional CSS’ section inside of the customizer.

    Let us know if that helps!

    Evan

    Thread Starter rbeaupre

    (@rbeaupre)

    8 years, 4 months ago

    Thanks @eherman24

    Is it not possible to adjust it for larger screen sizes? i.e. desktop?

    Evan Herman

    (@eherman24)

    8 years, 4 months ago

    Hi @rbeaupre,

    Sorry for the delay. Looks like you were able to get things working on the desktop as well.

    Great job!

    Let us know if you have any other issues or questions.

    Evan

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Center Header Menu w/ Custom Logo’ is closed to new replies.