menu & footer

  • stmoksaikung · Member ·

    Hi, I just switch to this beautiful theme. I would like to know if I can change the color of the menu and footer area from black to white, and also change the color of the characters on the menu and footer to black.
    I also like to know if it possible to change the menu to a fixed menu and make it stay on the top? Also can i add a call to action button or add a whatsapp/email link on the menu?

    Many thanks.
    ST

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

  • anarieldesign · Theme Author ·

    Hi ST,

    thank you for using our theme. Happy you like it.

    You can use Custom Colors feature to change theme colors: https://wordpress.com/support/custom-design/custom-colors/

    or you can use Custom CSS:
    For the Menu: 

    .standard-menu .site-header {
    background: #fff;
    color: #000;
}
.site-header a {
    color: #000;
}
@media screen and (min-width: 55em) {
.main-navigation ul ul {
    background: #efefef;
}
}

.site-title a:visited, .site-title a:focus, .site-title a:active {
    color: #000;
}

.site-header {
    background: #fff;
    color: #000;
}

#site-navigation button {
color: #000;
}

    For the Footer:

    .site-footer {
    background: #fff;
    color: #000;
}
.site-footer .widget-title,
.site-footer .widget-title a {
    color: #000;
}

    Using Custom Colors you have more control to change colors and you don’t need to know Custom CSS.

    To change menu to the fixed you need to add this to the Custom CSS:

    @media screen and (min-width: 55em) {
.standard-menu .site-header {
 margin-bottom: 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    right: 0;
    display: block;
}
}

    If you want to have a blue button (call to action) for the menu item, navigate to the Customizer > Menus, click on the menu item you want to have a blue button and inside “CSS Classes” write “blue”.

    Hope this helps.

    All the best,
    Ana

  • stmoksaikung · Member ·

    Hi Ana,

    Thanks. The code works well, except I cannot the menu item – whatsapp in another color. I already choose Customizer->Menu->”Regular Menu”->”Whatsapp” and input Green, but it seem the color is still black.

    I also notice that in the mobile, the menu’s site title seems takes up a few rows. Is it possible to make the title smaller?

    Thanks a lot!

  • anarieldesign · Theme Author ·

    Hi,

    you’ll need to write “blue” and not Green, as this theme uses blue button and than you can change the color by adding this to the Custom CSS:

    .main-navigation li.blue a {
    background: #228B22;
    color: #fff;
}

    Hope this helps.

    All the best,
    Ana

  • stmoksaikung · Member ·

    Thanks Ana. I am able to change the color of the CTA.
    I just found out that the footer change to white color, However, when see the website in smaller devise tablet and mobile, it seems there is a black rectangle above the footer, may I know how to fix it?

    In addition, like to display the site title in one row, instead of 2 in desktop mode, is there a way to modify it?

    Thanks.

  • anarieldesign · Theme Author ·

    Hi,

    you’ll need to add this to the Custom CSS: 

    .social-block {
    background: #fff;
}

@media screen and (min-width: 55em) {
#site-navigation {
    width: 60%;
}

.site-branding {
    width: 40%;
}
}

    Hope this helps.

    All the best,
    Ana

  • stmoksaikung · Member ·

    Hi Ana
    Thanks. After I insert the code, the black rectangle above the footer become a solid think black line across the screen above the footer. Is it possible to remove that too?

    Many thanks.

  • anarieldesign · Theme Author ·

    Hi,

    to remove borders you can add this: 

    .footer-widgets.clear {
    border-top: none;
    border-bottom: none;
}

    Hope this helps.

    All the best,
    Ana

  • The topic ‘menu & footer’ is closed to new replies.