Hi Terry

1. Try adding the following to the Custom CSS field of your templates parameters...

.hornav {

    text-align: center;

}

2. Also add the following to the Custom CSS field of your templates parameters...

.hornav > ul > li > a {

    text-transform: capitalize;

}

3. You can use the following custom CSS (edit to taste)...

.hornavmenu {

    background-color: #222222;

}

Ciarán

Morning Ciarán,

Thanks for that - a great help.

Just a couple more questions:

1) I need to centralize the logo. It's currently aligned left but if I change the coordinates on the X-Axis it works, but when you switch to a mobile device, the logo hangs off the right side of the page.
2) Is there a way to remove the shadows from the menu bar? Possibly drop shadow in the CSS?
3) Social links. Can you change the colour of the square?

Thanks again.
Regards
Terry

Hi Terry

1. To center your logo you can use the following custom CSS...

#header {

    text-align: center;

}

2. To remove use the following...

.hornavmenu, #header {

    box-shadow: none;

}

3. To set a background color to your social icons area you can use the following (edit to taste)...

#socialmedia {

    background-color: #000;

}

Ciarán

Perfect, thanks. Great help and advice as usual.

Regards
Terry

Hi Ciarán,

Below you've advised how to remove the shadow from the menu - which is great. I'm trying to make a 'flat' website so need to remove shadows from the rest of the 'top' modules, what CSS changes do I need to make?

Regards
Terry

Hi Terry

Try also adding the following Custom CSS...

#container_top1_modules, 

#container_top2_modules, 

#container_top3_modules, 

#container_main, 

#container_bottom1_modules, 

#container_bottom2_modules, 

#container_base, 

#container_copyright {

    box-shadow: none;

}

Ciarán

Hi Ciarán,

Very helpful as always. Homepage looks much better.

The social icons disappear as soon as the screen re-sizes to tablet/mobile. I assume the top menu navigation is hiding them? Have you had any instances like this? And if so, what can I do?

Regards
Terry

Hi Terry

To ensure your social icons are visible on all screen size, try adding the following to the Custom CSS field of your templates parameters...

#socialmedia {

    display: inline !important;

}

Ciarán