ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• October 21, 2014 at 1:13 pm #121945
  Green thumb

  Member

  Post count: 62

  Hi there. So I upgrade theme to see what is new and all that but I got stuck with broken main menu. Image befor and after says it all. Basically I got wrong paddings and I don’t know how exactly to correct them.

  Before:
  

  After:
  

  How I built menu in the first place:

  /* MAIN NAVIGATION 
  =============== */
  
  #main-navigation {
  margin-top: 40px !important;
  }
  
  .menu ul {
  	margin: 5px 40px 40px !important; /*prv cifra pomik od leve proti desni */
  	padding: 2.7em 2.7em !important; 
  	float: left !important;
  	list-style: none !important;
  }
  
  /* leave out .menu li if you have other options for it reserved */
  .menu li {
  	float:left !important;
  }
  
  .menu a {
  	float:left !important;
    	padding: .4em 1.8em !important; /* razmik med pisavo in gumbom */
  	text-decoration: none !important;
  	color: #FFD680 !important; /* barva pisave */
  /*	text-shadow: 0 1px 0 rgba(255,255,255,.5) !important; */
  /*      font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica !important; */
  /*         font: bold 1.1em/1  'augustaregular'!important; */
       font: bold 1.0em/1 'augustaregular' !important;
  /*       font: bold 1.1em/1 'old_londonregular', Arial, Helvetica !important; */
  	letter-spacing: 1px !important;
  /*	text-transform: uppercase !important; */
  	border-width: 1px !important;
  	border-style: solid !important;
  /*      zlata obroba */
  	border-color: #D0822A #FFB73D #D0822A #FFB73D !important; 
  /*     vijolcna obroba */
  /*        border-color: #A7255F #471025 #A7255F #471025 !important; */
         border-width: 2px !important;
  
  /*	background: #A7255F !important;  */
  
         background: #A7255F !important; 
  
  	background: -moz-linear-gradient(#440E26, #471025) !important;
  	background: -webkit-gradient(linear, left top, left bottom, from(#471025), to(#A7255F)) !important;
  	background: -webkit-linear-gradient(#440E26, #471025) !important;
  	background: -o-linear-gradient(#440E26, #471025) !important;
  	background: -ms-linear-gradient(#440E26, #471025) !important;
  	background: linear-gradient(#440E26, #471025) !important;         
   }
  
  .menu a:hover, nav a:focus {
  	outline: 0 !important;
          /* temna vijolcna */
  /*	color: #FFB73D !important; 
  	text-shadow: 0 1px 0 rgba(0,0,0,.2) !important;
  	background: -moz-linear-gradient(#471025, #471025) !important;
  	background: -webkit-gradient(linear, left top, left bottom, from(#471025), to(#471025)) !important;
  	background: -webkit-linear-gradient(#471025, #471025) !important;
  	background: -o-linear-gradient(#471025, #471025) !important;
  	background: -ms-linear-gradient(#471025, #471025) !important;
  	background: linear-gradient(#471025, #471025) !important;
  */
          color: black !important;
          text-shadow: 0 1px 0 rgba(0,0,0,.2) !important;
          background: -moz-linear-gradient(#A7255F, #A7255F) !important;
          background: -webkit-gradient(linear, left top, left bottom, from(#A7255F), to(#A7255F)) !important;
          background: -webkit-linear-gradient(#A7255F, #A7255F) !important;
          background: -o-linear-gradient(#A7255F, #A7255F) !important;
          background: -ms-linear-gradient(#A7255F, #A7255F) !important;
          background: linear-gradient(#A7255F, #A7255F) !important;
  
  }
  
  .menu a:active {
  	-moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
  	-webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
  	box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset !important;
  }
  
  /* Code for centering logo and menu 
  ========================*/
  /* Full width logo code 
  =================*/
  /*
  #logo {
  width: 100%;
  }
  #logo img, #logo img.retina {
  margin: 0 auto;
  }
  */
  
  /* Full width menu code 
  =================*/
  /*
  #nav-section {
  width: 100%!important;
  }
  .nav-wrap {
  float: none!important;
  }
  #main-navigation {
  float: none;
  width: 100%;
  height: 48px;
  text-align: center;
  }
  nav .menu li {
  float: none;
  }

  Hope someone can help me out because I put quite some time into building this custom menu.

  October 21, 2014 at 1:28 pm #121954
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  With it being a custom menu, I’m afraid we can’t support you with it. Try using Firebug to work out what changes you need to make

  – Kyle

  October 21, 2014 at 3:06 pm #122018
  Green thumb

  Member

  Post count: 62

  Hi there.

  Kyle – I know it’s custom and you guys have more important stuff to do but can you at least look at what might cause the broken menu? I would much appreciate.

  Because I tried to customize all the paddings I could think of and I still can’t get fixed that annoying padding between titles of main menu.

  October 21, 2014 at 4:24 pm #122048
  Green thumb

  Member

  Post count: 62

  I had to overwrite some of the stuff

  #main-navigation {
  margin-top: 60px !important;
  margin-right: 20px !important;
  }
  
  .menu li {
  	float:left !important;
          margin-right: -30px !important;
  }

  Most important being margin-right: -30px !important;

  October 21, 2014 at 4:41 pm #122056
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Great. Glad it’s sorted.
  -Rui

• Back to forum

  Posted in: Flexform