Viewing 4 replies - 1 through 4 (of 4 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, and thanks for the link to your site. On the menu, this is where the background and font color is set.

    .main-navigation {
        background-color: #f25f70;
        color: #fff;
    }

    The widget on the left of the footer in the demo site is the Contact Info widget. Add that to your sidebar and fill in the information and make sure “Show map” is selected.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    The widget is part of Jetpack, and it appears you have it activated on your site.

    If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

    Child Themes
    Child Theme creation plugins
    Jetpack plugin
    Custom CSS plugins

    Thread Starter Brooklynn8

    (@brooklynn8)

    It worked for the colour bar change but now I have run into another problem. How do I change the standard text colour for about us . contact us. the white does not show up and also if I wanted to change the roll over black colour.

    Thanks

    https://www.classicsignsto.com/en/

    Moderator Kathryn Presner

    (@zoonini)

    Since your menu background colour is very light, white text is very hard to read against it.

    Give this a try in your custom CSS editor or child theme:

    .main-navigation a, .social-links ul a:before {
      color: #494949;
    }
    .menu-toggle, .menu-toggle:hover, .menu-toggle:focus {
      color: #494949;
    }
    .main-navigation.toggled ul ul, .main-navigation.toggled ul ul a {
      color: #494949;
    }
    .main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a {
      color: #ff290c;
    }
    .main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a {
      color: #ff290c;
    }
    .main-navigation li.current_page_item > a .sub-menu li a, .main-navigation li.current-menu-item > a .sub-menu li a, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a {
      color: #4F4F4F;
    }

    This makes your rollover colour and current-page colour red (#ff290c) to match your site but you can change it to anything you like.

    Let me know how it goes.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu bar colour / google map’ is closed to new replies.