Action button

Hi,

I would like to customize my action button in the header, but I can't find any options for it. I would like it to look like the button on the right (button on the left it's how my button looks by default after activating it in theme options/header and subheader/extras/action button. 

image here: https://1drv.ms/u/s!AgnGQQXdd_gk0jGMw83t8bmwmOyQ

If there are no options for customization, could you please send me a code which I could paste to the custom CSS in theme options. 
I was also trying to use the Be Theme header builder, but adding button was not working at all - after adding to a row, it didn't even appear. But I would rather make the adjustment through theme options. 

Also where can I please find customization options for sticky header? What I found is only adjusting style in theme options/header and subheader/header/sticky header. There are only three options - dark, white and the same as top bar left background. I would like to have my sticky header white but when I chose white it's not a complete white - it's transparent white when scrolling. I thought I could choose a color of my liking by changing the color for the top bar left background in the theme options. When I changed it though, it didn't do anything.

Also since I want my button to be white as shown in the picture and at the same time my sticky header to be white as well, I would need to change the color of my action button (white background of button but black border and black text) and the menu as it would otherwise not be visible in the sticky header. I could also not find any options for changing colors of that.

Thank you 


Comments

  • Hi,
    Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
    thanks
  • Hi Pablo,
    thank you for the reply. My page is offline now but you don't need to be it live in order to answer my questions. It would not help you in any way, I am asking about customization of the action button and sticky header. 

    I could send you a screen of how it looks now and do a mock up in photoshop how I would want it to look. Would that help?
  • I can answer your questions, but I will not make any customizations for you without taking a look at your page.

    Almost all of your questions require the Custom CSS to achieve what you want.
    All visual customization of Action Button in BeTheme are in Theme Options > Colors > Header
    http://prntscr.com/mw9nq3

    The sticky header is a little bit transparent by the default, to remove that transparency, you have to use the Custom CSS.

    I don't want to create this CSS on my local device because I do not know which customization you made and it could not be working.
    If your website is not live, please contact me when your site is live, then I'll make it for you.
    Thanks
  • Thank for
    your answer, I have been trying hard to get the result I want but I still cant achieve it. The website is still work in progress but I already uploaded it from
    local to live since I really don’t know how to solve these customization. Would
    be grateful for any help.

    I would
    like my action button to look like in this picture, but it’s not possible with
    the Theme Options as you said. I cannot make it transparent and put radius to
    it.

    I am aiming
    for this result: https://1drv.ms/u/s!AgnGQQXdd_gk0j2BEOKPt0pdD-KN


    But currently stick with this: http://thefilipinadream.com

    Then the
    whole sticky header is hard for me to set up. I managed to change the color to
    white, but could not find CSS to remove the transparency. Also I would need to
    upload a different logo to a sticky header as it would not be seen on white, change
    the color of the menu so it’s visible and include my action button into the sticky
    header with different styling so it’s visible.
    Also I did
    not find a way how to change the color of the line below an active link. In the
    Theme options I only found a way how to get rid of it completely but I just
    need to change the color to blue.

    I am aiming
    for this result: https://1drv.ms/f/s!AgnGQQXdd_gk0jx5GxvKIX74rtvc

    But currently
    stick with this: http://thefilipinadream.com

    Any help
    would be much appreciated. It would be awesome if these customizations options were added
    to theme options in some future updates. It would make the theme even greater
    regarding customization.

    Thank you.

  • To change the Action Button, paste this into the Theme Options > Custom CSS & JS > CSS
    #Top_bar.is-sticky{
    opacity:1 !important;
    }

    #Top_bar.is-sticky .action_button{
    border:2px solid blue !important;
    box-sizing:border-box !important;
    border-radius:18px !important;
    color:blue !important;
    margin-top:-2px !important;
    }


    If you want to change the Active Link color and underline of it, you have to change the "Active Link color" in the Theme Options > Colors > Menu

    Thanks
  • Thank you a lot, I managed to do almost all the changes I needed with that code:

    Still could not change the underline of the active link. The option you sent me a picture of change both active link and underline, but I need to change just the underline. Also how can I change the color of the active link in the sticky header please? 

    I was trying this code but it did not work:

    #Top_bar.is-sticky .topnav-link: {
        color: #000 !important;
    }

    Also how can I get rid of the action button on smaller resolutions please? It is now making the header huge. 

    Thank you 
  • Hello,
    try this css
    #Top_bar.is-sticky .menu > li > a {
    color:#000 !important;
    }
    If you want to disable the action button on mobiles, go to theme options>responsive>header and enable "minimalist" option for the mobile header.
    thanks
  • Hi,
    thanks it helped. But the color of the underline did not change. How can I change that please? 
  • Use this CSS
    #Top_bar .menu > li > a::after{
    background:#000 !important;
    }
    Thanks
Sign In or Register to comment.