Anemone theme: Need to separate featured image and background of the menu.

en WordPress.com Forums Anemone theme: Need to separate featured image and background of the menu.

• 

  labactinutrition · Member · Feb 14, 2017 at 9:47 am

  • Copy link
  • Add topic to favorites

  On my HP, https://blog.actinutrition.fr/

  The main nav is How I want it to be
  thanks to the added custom CSS i’ve added:

  .main-navigation {
  background: #f8f8f8;
  }

  .site-primary-menu a,
  .site-primary-menu a:visited {
  color: #555;
  }

  .site-primary-menu a:hover,
  .site-primary-menu a:focus,
  .site-primary-menu a:active {
  color: #333;
  background: #e5e5e5;
  }

  .sf-menu ul a,
  .sf-menu ul a:visited {
  color: #555;
  background: #fff;
  }

  .sf-menu ul a:hover,
  .sf-menu ul a:focus,
  .sf-menu ul a:active {
  color: #79b530;
  background: #f8f8f8;
  }

  But on this page:
  https://blog.actinutrition.fr/2017/02/08/detox-pourquoi-les-programmes-de-phytotherapie-actinutrition-sont-ils-uniques-1/

  Top part of the featured image becomes background of the menu.
  I want to separate them both. So the main nav appears like on my HP.

  Any help appreciated
  Thanks

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

• 

  aakashpatelsite · Member · Feb 14, 2017 at 12:28 pm

  • Copy link

  Hi,
  I have recently visited your blog, to separate the nav bar from your image just replace following css of main nav bar

  .main-navigation {
      margin-bottom: 8%;
  }

  and if you want to add background color you can add in the same CSS.

  Thanks,
  Aakash Patel

• 

  labactinutrition · Member · Feb 15, 2017 at 4:30 am

  • Copy link

  Hi Aakash,

  Thanks for your help.

  This does make the title of the blog posts lower to the nav bar
  but not separate the feature image from the nav bar
  as you can see here:
  https://blog.actinutrition.fr/2017/02/08/detox-pourquoi-les-programmes-de-phytotherapie-actinutrition-sont-ils-uniques-1/

  The nav bar does not look the same as on my HP:
  https://blog.actinutrition.fr

  As you can see here
  https://blog.actinutrition.fr/2017/02/08/detox-pourquoi-les-programmes-de-phytotherapie-actinutrition-sont-ils-uniques-1/
  The top part of the featured image becomes the background of the nav bar. I’d like to separate them both.

  I am not sure, but maybe I need to edit the another CSS.
  Thank for your help again !

• 

  aakashpatelsite · Member · Feb 15, 2017 at 1:23 pm

  • Copy link

  Hi,
  To make color same as HP then just remove the .main-navigation CSS in which you have given background color in the navigation bar.

  By removing this CSS it will take background color as white by default and you have not given any background color in the header so it will also take white as default and make HP color and navbar color as same.

  Thanks,
  Aakash Patel
  http://www.ifourtechnolab.com/

• 

  labactinutrition · Member · Feb 16, 2017 at 4:23 am

  • Copy link

  Hi, thanks again
  I did remove
  .main-navigation {
  background: #f8f8f8;
  margin-bottom: 5%;
  }
  but it is still the same
  and now on my HP, the nav bar is black instead of light grey.

  It must be another CSS than .main-navigation that controls the featured image.

• 

  brezocordero · Staff · Feb 16, 2017 at 3:48 pm

  • Copy link

  Hi there,

  You could instead try reducing the font size on the titles and add a background to the navigation bar.

  /*change font size*/
  .wf-active .site-hero .entry-title-site-hero, .site-hero .entry-title-site-hero h1 {
  	font-size: 40px ;
  }
  
  /*change navigation background color*/
  #site-navigation {
    background-color: #242424 ;
  }

  Hope that works for you!

• 

  labactinutrition · Member · Feb 20, 2017 at 2:04 am

  • Copy link

  That’s it! Thank you so much :)

  Hope this thread will help others in my case ;)

• The topic ‘Anemone theme: Need to separate featured image and background of the menu.’ is closed to new replies.