Change Look of Nav and Header

  • Resolved breecrowder

    (@breecrowder)


    8 years, 6 months ago

    I really don’t like the look of the current Pictorico header, as seen here. I’d LOVE to get something that looks like this.

    Any idea how to make these changes? The current nav/header look isn’t working for me.

Viewing 1 replies (of 1 total)

  • Hi there,

    You could make some changes to your menu using some custom CSS.

    To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have the Jetpack active on your site, then you can enable its custom CSS module.

    Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme in order to centre and get the menu to take up the full width of your site:

    .main-navigation {
    text-align: center;
    float: left;
    max-width: 100%;
    width: 100%;
}

    Please note, the above CSS will hide the theme’s built in site title and tagline.

    The following will change the background colour of the menu to black:

    .main-navigation {
    background-color: #000;
}

    You can change the value of #000 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:

    https://www.color-hex.com/

    To change the colour of the links in the menu, use the following snippet:

    .main-navigation ul li a {
    color: #FFF;
}

    As before, you can change the HEX code from #FFF to any colour of your choice.

    Finally, the following snippet defines the colour that your menu links will be when active, visited, or hovered on:

    .menu-toggle ul a:hover, .main-navigation.toggled .nav-menu ul a:hover, .site-title a, .main-navigation ul li:hover > a, .main-navigation ul li:hover > a:visited, .main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a {
    color: #FFF;
}

    Let me know how you get on with that or if any extra questions come up.

Viewing 1 replies (of 1 total)
  • The topic ‘Change Look of Nav and Header’ is closed to new replies.