Creating a full-width grey bar below menu

Hi.

I am using Music State J3.0 template and would like to display a single a grey bar below the menu bar with a height of px.

Ultimately, I'd like to place some links in this but please can you advise how I can create a single bar across the full width of the page, just above the Image Show GK4 slideshow?

Thanks!

Simple way would be to create a new module in header position, make sure its order is above the slideshow. Then add your links like this <p style="text-align: center;">Link 1 Link 2 Link3 Link 4 Link 5</p> you can use the link buttom in the editor to create the link.. Add a Module Class Suffix in the advanced tab. Anything you want like " .linkz". In your template params make sure css override is turned on then you can style the module position by adding css to custom.css.. Try this out. If you need help you can reply or email me with ftp and admin and I can help you out

.linkz {
background-color: #ccc;
height: 50px;
padding: 1px 0;
}

Hey thanks a lot devsmi - great clear advice that worked a charm!!

I really appreciate you getting back to me so quickly too.

You are welcome teainsider. I forgot to mention that we could also add a new module position to the template for ya so your bar has its own dedicated position.

If you need any help styling the bar let me know. just need your url to take a look.

)

Hey thanks a lot devsmi - great clear advice that worked a charm!!

I really appreciate you getting back to me so quickly too.

devsmi, I am content with this result but one question I have for you is... is it possible to make this new grey bar stay on top even when you scroll down the page (like with the menu)...?

Yes ofcourse. So replace that last code I gave you with this. Changing the position

.linkz {
background-color: #ccc;
height: 50px;
padding: 1px 0;
position: fixed;
width: 100%;
z-index: 1001;
}

Also Im sure you know this already but the grey bar #ccc you can change to any HEx color code which you can choose here http://www.colorpicker.com/

OK, so I replaced:

.linkz {
background-color: #ccc;
height: 50px;
padding: 1px 0;
}

with:

.linkz {
background-color: #ccc;
height: 50px;
padding: 1px 0;
position: fixed;
width: 100%;
z-index: 1001;
}

Sadly, it hasn't worked. Any ideas why?

Are you able to show me your url? either here or PM

Ok my bad, in the module suffix just add linkz no space or period before