Custom css help with header

6 posts from 4 voices

• Started 10 months ago by _weezer
• Latest reply from Ismael
• This topic is not a support question

Tags:

No tags yet.

1. 

   _weezer
   Member

   Hello!
   You have always been so helpful on this forum, I was wondering if someone would be able to help with the below modifications on my site here:- http://dylan.e-learndesign.co.uk/~teflwp/

   1) I would like to center justify the main navigational bar

   2) I would like to add two buttons (large shortcode buttons) onto the right hand side of the logo, so it sits right justified and above the menu

   Would anyone be able to help me with the custom css required?

   Best regards

   Posted 10 months ago #
2. 

   Ismael
   Moderator

   Hi _weezer,

   1.) Try to add this on your Quick CSS:
   

   .main_menu ul:first-child > li > a {
   margin: 0 15px !important;
   }
   
   .main_menu ul {
   margin-left: 32px !important;
   }

   2) I can already see two buttons above. Just add this code in Quick CSS to position them:
   

   .teflbuttons .avia-button.light.custom.medium {
      position: absolute;
      bottom: 32px;
      right: 184px;
   }
   
   .teflbuttons .avia-button.light.custom.xl {
      position: absolute;
      bottom: 32px;
      right: 46px;
      line-height: 2em !important;
      width: 100px !important;
   }

   Just adjust the bottom and right values. Also, you can remove the line-height, I used it to make the buttons consistent in size. Hope this helps. :)

   Regards,
   Ismael

   Posted 10 months ago #
3. 

   jwcrash
   Member

   Could you guys tell me what code (and where it belongs) is being used to add those two buttons? I'm guessing it's in the header.php file but am not sure and would LOVE to add this to a site I'm working on.

   Thanks if you can help!

   Posted 9 months ago #
4. 

   Devin
   Moderator

   Hi jwcrash,

   You can do something similar to the above by adding your own div class to hold the buttons and then making the class of the links the .avia-button.light.custom.medium or xl etc.
   

   <div class="custombuttons">
         <div><a href="http://yourlink.com" class="avia-button light custom xl" >Button Text</a></div>
   </div>

   Then use the same kind of css styling as above to style it.

   You'll add the html into your header.php where you want them to appear and if you want exactly the same as above you'll style the custombuttons class to align: right as well.

   Regards,

   Devin

   Posted 9 months ago #
5. 

   jwcrash
   Member

   Thanks very much!

   Posted 9 months ago #
6. 

   Ismael
   Moderator

   Hey,

   Glad we could help. :)

   Regards,
   Ismael

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.