Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 9, 2014 at 7:12 pm #316053
    mcraig77

    I would like to add a button to the top menu like the screenshot. I would like the button to link to this page: http://ucirotc.com/?page_id=71

    Here is the screenshot of what I would like to do.

    https://www.dropbox.com/s/ktoi9ep1ostrphe/button.png?dl=0

    T

    September 10, 2014 at 5:11 am #316270
    Ismael

    Hey mcraig77!

    Thank you for using Enfold.

    You can add this at the very bottom of functions.php:

    function add_custom_script(){
?>
<div id="header-right"><div class="container"><a href="http://ucirotc.com/?page_id=71">Apply</a></div></div>
<?php
}
add_action('ava_main_header', 'add_custom_script');

    Use this on Quick CSS or custom.css to stylize the button:

    div#header-right div a {
background: yellow;
padding: 10px 16px;
font-size: 20px;
text-transform: uppercase;
border-radius: 10px;
color: white;
}

div#header-right {
position: absolute;
right: 30%;
}

    Cheers!
    Ismael

    September 11, 2014 at 8:01 pm #317617
    mcraig77

    Hey Ismael –

    I went ahead and added the custom code to the very bottom of the functions.php file and now i’m getting this error when I try and load the page:

    Parse error: syntax error, unexpected ‘?’ in /home/content/43/11435443/html/UCIROTC/wp-content/themes/enfold/functions.php on line 501

    https://www.dropbox.com/s/k8xth0es78e0o4a/functions.jpg?dl=0

    Please advise.

    September 12, 2014 at 4:30 am #317812
    Ismael

    Hey!

    Please try to copy the code from here: http://pastebin.com/ndL11vbH

    Best regards,
    Ismael

    September 12, 2014 at 8:14 am #317937
    mcraig77

    Hey!

    Added that code and the error went away. Also added the css, but the button is not in the right place. Also anyway of making the button have a hover like the enfold buttons?

    See screenshot.
    https://www.dropbox.com/s/7dtcvad9l93k5xz/Screen%20Shot%202014-09-11%20at%2011.12.10%20PM.png?dl=0

    Thanks!

    September 12, 2014 at 12:44 pm #318042
    Yigit

    Hi!

    Please add following code to Quick CSS

    div#header-right div a { float: right; line-height: 35px; margin-top: 25px; padding: 0 20px !important; }

    Regards,
    Yigit

    September 12, 2014 at 8:13 pm #318309
    mcraig77

    Hi Yigit,

    That moved the button right, Thanks! But I’m not able to click on the button :(

    http://ucirotc.com/

    3 other small issues.

    1. Can I make the button have a hover when rollover? Like the theme buttons?
    2. How do I change the apply font family? I would like it to be “Cardo”
    3. is there a way to add a drop shadow on the button?

    Thanks!

    September 13, 2014 at 12:58 pm #318499
    Ismael

    Hi!

    Thank you for the update.

    Add this on the header-right selector:

    div#header-right {
z-index: 9999;
}

    Change the font family with this:

    div#header-right div a {
font-family: 'Cardo', sans-serif;
}

    Refer to this link on how to add a box shadow: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    Please visit Envato Studio or Werkpress for further customization.

    Regards,
    Ismael

    December 22, 2014 at 1:30 am #371364
    daniejm

    Hi there,

    Sorry to piggy-back, but this thread addresses exactly what I was looking to do.

    I followed the instructions above (adding script to end of Functions file and adding Quick CSS for button stylization). The button is present in the nav area now, but the link is not clickable. I’ve tried linking to Google as a testing URL. Please advise.

    For your reference, even though the site is in VERY early stages: http://www.prospxd.com/dev2

    Thanks in advance,

    Joe

    EDIT: Just kidding. I was missing the header-right CSS.

    • This reply was modified 9 years, 11 months ago by daniejm.
    December 22, 2014 at 6:37 am #371442
    Ismael

    Hi!


    @Joe    : Glad it is working now.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Add a button the top nav menu’ is closed to new replies.