centre my nav bar

• 

  theboutiquewakefield · Member · Apr 20, 2016 at 7:39 pm

  • Copy link
  • Add topic to favorites

  http://www.theboutiquewakefield.com

  how can i centre my site logo and primary nav bar in css

• 

  thesacredpath · Member · Apr 21, 2016 at 1:40 am

  • Copy link

  Hi there, add the following to your custom CSS.

  .has-header-search .site-branding, .site-branding {
      margin-left: auto;
      margin-right: auto;
      float: none;
      max-width: 357px !important;
  }
  .primary-navigation {
      text-align: center;
  }
  .primary-navigation ul {
      display: inline-block;
  }

• 

  theboutiquewakefield · Member · Apr 24, 2016 at 4:19 pm

  • Copy link

  thanks so much great help

• 

  theboutiquewakefield · Member · Apr 24, 2016 at 6:11 pm

  • Copy link

  would you know how to change the colour of the navigation hover over to #dadada and the current page navigation button background to be the same rather than the blue

• 

  thesacredpath · Member · Apr 25, 2016 at 6:52 pm

  • Copy link

  Hi there, I see you have gotten this taken care of. Please let us know if you have any additional questions.

• 

  theboutiquewakefield · Member · Apr 30, 2016 at 4:05 pm

  • Copy link

  I was wondering if you knew how to alter the height of the hero future banner to my artwork size? 900px x 350px. it also makes the artwork darker it seems to have a filter on it? how can i remove this

  Thanks

• 

  thesacredpath · Member · May 2, 2016 at 10:12 pm

  • Copy link

  Just to verify, are you talking about the image that appears right below the navigation, such as on this page: https://theboutiquewakefield.com/gallery/ ?

  If so, as you narrow and widen your browser window, you will see that page featured images adjust in size so that the nearly the entire image stays visible. If we set your image to a static size of 1230 x 350 pixels, the text to the the left, and artwork to the right will end up disappearing on smaller screens. This CSS will override the height change and keep it the same for all screen sizes.

  @media screen and (min-width: 200px) {
  	.hero.with-featured-image, body[class*="front-page"] .hero {
  		padding: 180px 0 !important;
  	}
  }

  Can you explain a bit more what you are wanting things to look like and I’ll see if I can make that happen..

  On the image darkness, we can remove that with the following CSS.

  body:not(.no-image-filter) .hero.with-featured-image::before {
      background: rgba(0, 0, 0, 0);
  }