Navbar help

elmanielmani Big grinsPosts: 48Registered Users Big grins

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

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,962Registered Users Major grins
    edited August 10, 2018

    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.

  • elmanielmani Big grins Posts: 48Registered Users Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,962Registered Users Major grins
    edited August 11, 2018

    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).

  • elmanielmani Big grins Posts: 48Registered Users Big grins

    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' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,962Registered Users Major grins

    @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;
        }
    
  • elmanielmani Big grins Posts: 48Registered Users Big grins

    Mike, you're a legend! Thanks

Sign In or Register to comment.