Secondary navigation bar does not fit in-line

• 

  jmbonner88 · Member · May 1, 2020 at 10:14 pm

  • Copy link
  • Add topic to favorites

  The secondary navigation menu shows on 2 rows instead of inline. I have reduced padding, tried reducing the number of items in the menu but it always ends up as 2 rows. What CSS do I need to have all the menus on 1 line?

  The blog I need help with is: (visible only to logged in users)

• 

  shubhamgmath · Member · May 2, 2020 at 12:11 am

  • Copy link

  Hi jmbonner88

  The secondary navigation menu shows on 2 rows instead of inline. I have reduced padding, tried reducing the number of items in the menu but it always ends up as 2 rows. What CSS do I need to have all the menus on 1 line?

  To bring the secondary menu in a single line use the CSS code given below where we will be changing the menu item float property from left to none.

  .secondary-navigation > div > ul > li {
      float: none;
  }

  After applying the code given above you will feel that you need more space between the logo and menu then you can add left padding to the menu. Here is the code for that :

  .site-menu ul {
      padding-left: 98px;// adjust the padding value.
  }

  Hope this helps.

• 

  jmbonner88 · Member · May 2, 2020 at 1:37 am

  • Copy link

  Thank you, that worked!

• 

  shubhamgmath · Member · May 2, 2020 at 7:14 am

  • Copy link

  Your Welcome :D