Create Full Width Nav Menu below header in Thesis Theme 2.0

Recently I add more Thesis Theme 2.0 tutorials for Thesis Theme 2.0 users. This is another one tutorial for Thesis 2.0 users.

Already we put post for How to create full-width Header in Thesis 2.0?

In this post I am going to show you, how to create full width navigation below header in Thesis Theme 2.0

Let’s see the procedure.

Steps

  • First go to wordpress admin section
  • Then go to Thesis skin editor section
  • Then create one new container via Thesis add box section
  • Then click on container and ad HTML id as per below image

full-width-nav

  • Then add your nav menu to that container
  • Then add that container below full-width-header(refer below image)

inside-full-nav

  • Then click on save template and go to css section
  • Then create one single element package and configure as per below image.

full-width-css

  • Then go to option section and give background color – eeeeee, width – 100%, top margin – 0, right margin – auto, bottom margin – 0 and left margin- auto (refer below image)

full-nav-css-width

  • Then click on save package
  • Then add your reference name in skin CSS section”&full-width-nav”
  • Then click on menu package and go to additional css section
  • Then paste the following code and click on save package(refer below image)
.menu {
background:#eee;
margin:0 auto;
width:900px;
}

full-nav-menu

  • Then click on save css button. That’s all.
  • Now check your site.

We will be providing more Thesis Theme 2.0 Tutorials and Thesis 2.0 Boxes, so don’t miss those tutorials and Boxes, subscribe below box

We launched Thesis Skins for Thesis Theme 2.0., if you have time, visit our Thesis Skins page.

If you have any doubt regarding this tutorial, feel free to ask me via below comment box.

If you like above tutorial, share with your friends via following social media options.

Leave a Comment

  • Shuvo July 8, 2013, 5:53 pm

    It’s not working, Why ?

    • admin July 9, 2013, 4:56 am

      Hi,

      it must work.. did u do as per our instruction correctly?

      • Shuvo July 9, 2013, 3:47 pm

        Now working. Thanks for your amazing tutorial.

  • Rachel October 15, 2013, 7:37 am

    Hi- not sure why, but I can’t get the nav bar to stretch all the way to the end of the page. Someone suggested deleting the additional CSS code you suggest, but that hasn’t helped either.

    Any ideas?

    • admin October 16, 2013, 4:18 am

      Hi,

      Paste the following code to thesis custom css section..

      .full_width_header {
      width: 900px;
      margin: 0 auto;
      }

      .menu {
      margin: 0 auto;
      width: 900px;
      }

  • Rohit Gahlawat June 29, 2014, 9:51 am

    Thanks, It worked great on my website. I was having problem in centerized the text according to content , this tut solved my problem.
    Thanks a lot. Keep doing the great work.

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.