Category

Web Development

Changing menu colour on scroll

By | Uncategorized, Web Development | 6 Comments

The following code applies to the Divi WordPress theme by Elegant Themes.

The effect is to have a transparent menu over a full screen slider and then turn the menu semi-opaque when the use scrolls the page.

See an example here: http://southcoastjazz.co.uk/

This is a modification of Geno Quiroz’s tutorial (http://quiroz.co/ghost-home-page-and-change-menu-background/) as well as Vlad Patrascu’s tutorial (http://wpdots.com/cover-slider/)

Read More

Adding a Sticky Menu to the Harmony Theme

By | Web Development | One Comment

The following instructions will convert the menu of the Harmony WordPress theme to a sticky menu (will stick to the top of the screen when it hits the top due to the page scrolling).
Here is a demo of the theme with the menu converted to ‘sticky’.
http://www.dallasdesign.uk/harmony/

The following instructions assume you are working with a child theme (you should be). The folder for my child theme in this example is Harmony-child.

First of all you will need to create (if you have not done so already) a style.css file in the child theme folder (wp-content/themes/Harmony-child/style.css).
Within this file add the following code:

/*
Theme Name: Harmony Child Theme
Template: Harmony
Version: 0.1
*/
@import url("../Harmony/style.css");



#main-nav.fixed {
    position: fixed;
    top: 0;
    padding-top: 5px;
    width:100%;
    margin: 0 0 0 -50%;
    left:50%;
    z-index: 1;
}

Read More