How to center header image and navigation bar

Sparkling
1

My site url is evidencecenter.com. I have a header image that is 480 px wide.
As a result the navigation bar is below the image. How can I center them both. Right now the image is left justified and the navigation bar is right justified.

2

Still not sure what you are trying to achieve but this code will make sure to add Custom header image right above menu and then center both in the middle of page.

You can add this code to Appearance >> Theme Options >> Other >> Custom CSS.

@media (min-width: 1024px) {
  .navbar-header {
    text-align: center;
    float: none;
  }
  #logo {
    margin-left: 28%;
  }
  .nav.navbar-nav {
    float: none;
    margin-left: 23%;
  }
}

If this is not what you were looking for, please draw a quick sketch in Paint or otherwise and I will try to help with tweaking your theme layout.

3

Algars:

Thanks for your response… I believe that is what I want to do. However, one of the code lines uses the term “text-aling”. Is that just a typo and you really meant “text-align” ?

Herb

4

Sorry, you are right. It’s a type. It should be text-align

5

Algars:

I added the custom CSS you wrote, but it didn’t seem to have any effect. Have you had a chance to look at my site: www.evidencecenter.com? I would appreciate any recommendation about how to make the header image and menu centered.

6

I did have a look at your website and wrote Custom CSS just for your website. Code is not present in Custom CSS field that I mentioned above because it is not printed in website source at all. Please have a look again

7

Algars:

I had taken off the custom css to see if it was affecting another problem I have (discussed below). I put it back in and eventually got it to center the image by adjusting the logo margin left to 0.

I have another serious problem, however, with a new page that I published, and then took back down and have it as a draft. I have attached a pdf for your info. It was supposed to be just a plain page, but comes out with a comment box and other extraneous text displaying some of the code. I have looked at the theme documentation, and looked at the screen options but cannot figure out how to eliminate everything but my page text.

Please let me know how to set up a clean page.

8

@hisaacs

That’s WordPress and comments are enabled by default. If you are still having hard time to disable comments you can have a look at these two videos that will give you an idea how to disable comments for posts and pages.

Let me know if this helps.