Navbar help

elmani

Hi all.
It's that time of the year when I get bored with my site and want a redesign!

I'm thinking of using the full screen slideshow for my landing page. I've created a transparent version of my logo and that shows up great against any images that I have running in the slideshow, but the navbar doesn't always show well. Any ideas how I can solve?? (for example - could I put a slightly transparent box behind the navbar - just the text, not the whole width of the page? OR am I able to create buttons using my own font instead of the options available as standard?).

I'm just playing with the design at the moment, so haven't got a link I can send, but hope my explanation is clear.

As ever, any advice would be greatly appreciated.
Adam

www.elmani.com

Hikin' Mike

For your question, yes. You can either use an transparent or semi-transparent navbar or you can create buttons in CSS or Photoshop and then use a HTML/CSS block to create you navbar.

elmani

Thanks Mike. I've now set the full screen gallery up on my homepage (www.elmani.com). It works as I wanted it to, but on some photo's you can't read the menu text. Any advice on how I can either 1) Put a semi-transparent box or 2) Create buttons using my own font (like my logo?) - I only want to use this on my homepage, I want to stick with how it looks on all my other pages. I've searched the forum already, but can't figure it out.. Thanks in advance

Hikin' Mike

What I would do is to have a semi-transparent background on your header (logo and navbar). You can probably add a CSS block on THIS PAGE ONLY, although you can add it to your theme's custom CSS section.

.sm-page-home .sm-page-layout-region-header {
    background-color: rgba( 0, 0, 0, .5 );
    }

If you prefer just the navbar, use this instead:

.sm-page-home .sm-page-layout-column .sm-page-widget-nav {
    background-color: rgba( 0, 0, 0, .5 );
    padding:10px 0
    }

You can change the opacity (.5) from 0 (transparent) to 1 (solid).

elmani

Thanks as ever Mike! However, I'm trying to find a solution to put the semi-transparent bar just being the menu text and not the whole width of the page... any ideas? Adam

Hikin' Mike

@elmani said:
Thanks as ever Mike! However, I'm trying to find a solution to put the semi-transparent bar just being the menu text and not the whole width of the page... any ideas? Adam

Got it.

The padding is top/bottom (10px) and left/right (15px). Adjust as necessary.

.sm-page-home .sm-page-widget-nav-toplink a{
    background-color: rgba( 0, 0, 0, .5 );
    padding:10px 15px;
    }

elmani

Mike, you're a legend! Thanks