Submenu width / Hemingway Rewritten

• 

  samuelbourille · Member · Mar 9, 2015 at 1:40 pm

  • Copy link
  • Add topic to favorites

  Ho,

  How can i change the submenu width in my navbar ?

  Thanks a lot for your help !

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

• 

  samuelbourille · Member · Mar 9, 2015 at 1:44 pm

  • Copy link

  I found this :

  .main-navigation ul ul li {
  width:200%
  }

  And it actually reduce width for the text but not for the background of the sub menu…

  I Keep looking but if you have any ideas to help ?

• 

  samuelbourille · Member · Mar 9, 2015 at 1:46 pm

  • Copy link

  My mistake, it seems to be working.

• 

  samuelbourille · Member · Mar 9, 2015 at 2:23 pm

  • Copy link

  Another queston would be, what about height of the sub background menu ?

  Whein i try this :

  .main-navigation ul ul li {
  width:200%
  height : 20px
  }

  Its just reduce background from the top and so text is over background…

• 

  samuelbourille · Member · Mar 9, 2015 at 2:36 pm

  • Copy link

  I begin to understand CSS… i’m new at this… and i’m alos talking to myself :

  .main-navigation ul ul li a {
  padding : 0.8em;
  }

  This is working

• 

  samuelbourille · Member · Mar 9, 2015 at 3:15 pm

  • Copy link

  And to finish here the code to change lots of stuff in the menu of the Hemingway Rewritten :

  #page .main-navigation a,
  #page .main-navigation a:visited {
  font-size: 92%;
  margin-top: -.4em;
  }
  .main-navigation,
  .main-navigation .children li {
  background: #000000;
  height: 2.2em;
  }

  .main-navigation li:before {
  color: #fff;
  margin-top: -.75em;
  }

  .main-navigation ul ul li {
  background: #D6D6D6;
  width: 120%;
  margin: -5%;
  margin-left:1%;
  }

  .main-navigation ul ul li a {
  color: #000OOO;
  margin-left: 6%;
  padding: 1em;
  width: 100%;
  }

  .main-navigation ul ul li li {
  background: #D6D6D6;
  width: 300%;
  margin: 0;
  }

  .main-navigation ul ul li li a {
  color: #OOOOOO;
  margin-left: 10%;
  padding: 1em;
  width: 100%;
  }

  .main-navigation li:hover > a {
  color: #B1004F;
  }

  .main-navigation .current_page_item a,
  .main-navigation .current-menu-item a {
  color: #B1004F;
  }

  .main-navigation a,
  .main-navigation a:visited {
  color: #fff;
  }

  .main-navigation ul > li.has-children:after,
  .main-navigation ul > li.page_item_has_children:after {
  border-top-color: #fff;
  }

  .main-navigation ul ul > li.has-children:after,
  .main-navigation ul ul > li.page_item_has_children:after {
  border-left-color: #fff;
  }

  .main-navigation ul ul a,
  .main-navigation ul ul a:visited {
  border-bottom: 0;
  }

  .main-navigation ul ul {
  box-shadow: 0 0 0;
  }

• 

  samuelbourille · Member · Mar 9, 2015 at 3:42 pm

  • Copy link

  Well forget it, my last comment is full of mistakes…

  By the way it looks impossible to delete its own comments on the forum wich is really weird…

• 

  samuelbourille · Member · Mar 9, 2015 at 4:10 pm

  • Copy link

  Something like that is working quite ok for me :

  #page .main-navigation a,
  #page .main-navigation a:visited {
  font-size: 92%;
  margin-top: -.5em;
  }

  #page .main-navigation .current-menu-item a,
  #page .main-navigation :hover > a {
  color: #B1004F;
  }

  .main-navigation,
  .main-navigation .children li {
  background: #000000;
  height: 2.2em;
  }

  .main-navigation li:before {
  color: #fff;
  margin-top: -.75em;
  }

  .main-navigation ul ul li {
  background: #000;
  width: 120%;
  margin: -3%;
  margin-left: -1%;
  height: 2em;
  }

  .main-navigation ul ul li a {
  color: #fff;
  margin-left: 4%;
  padding: 1em;
  width: 100%;
  }

  .main-navigation ul ul li li {
  background: #000;
  width: 300%;
  margin: 0;
  margin-left: 1%;
  }

  .main-navigation ul ul li li a {
  color: #fff;
  margin-left: 10%;
  padding: 1em;
  width: 100%;
  }

  .main-navigation ul a,
  .main-navigation ul a:visited {
  color: #fff;
  }

  .main-navigation ul > li.has-children:after,
  .main-navigation ul > li.page_item_has_children:after {
  border-top-color: #fff;
  }

  .main-navigation ul ul > li.has-children:after,
  .main-navigation ul ul > li.page_item_has_children:after {
  border-left-color: #fff;
  }

  .main-navigation ul ul a,
  .main-navigation ul ul a:visited {
  border-bottom: 0;
  }

  .main-navigation ul ul {
  box-shadow: 0 0 0;
  }