Support » Theme: Customizr » logo and navbar over slider

Viewing 15 replies - 1 through 15 (of 22 total)
  • Take a look at the Snippets and you should find something to help

    This one is probably what you want.

    Thanks Dave,
    I’ll take a look immediately.

    Ok, I’ve read but I can’t figure out how to set my needs.
    Please consider I’m a beginner and I’m still learning.


    Moderator Andrew Nevins


    Could you explain why that snippet doesn’t so what you want for clarification?

    Here an example on what I’d like to achieve:

    Moderator Andrew Nevins


    Could you link your site too?

    Maybe the title:
    logo and navbar on the top of slider

    is better and cleaner than:
    logo and navbar over slider

    I’m sorry but I cannot change title.

    Moderator Andrew Nevins


    Try using this CSS:

    .tc-header {
     position: relative;
    .tc-header .brand .site-logo {
     position: absolute;
     bottom: 0;
     z-index: 201;

    Ok Andrew, now I’ve got logo in the middle and on the top of navbar, but navbar is still above the slider.
    Half way done.
    However thank you I really appreciate!

    Moderator Andrew Nevins


    Sorry, I forgot you wanted it on the slider when i looked at that example site

    Don’t worry Andrew, I appreciate your help!
    Actually I’m trying to figure out how to unhook and re-hook slider to have it on the very top of the page.
    Now I need to get this navbar (and logo too) “z-index matter I think..” on the top of the slider, but it’s tricky for me… argh!!!

    Moderator Andrew Nevins


    It’s also tricky thinking where it’ll fit in for mobile.

    Yes! mobiles too! “Damn devices ;-)”.
    Well, it’s saturday late afternoon.
    It’s time to quit for a bit.
    By the way I’m looking at your blog, very interesting.

    Thank you again!!!

    Hi Ryan,

    I’m trying to do the same thing. I got pretty far by doing the following:

    Adjusting the top margin of the carousel using this CSS (in my Child Theme!):

    .carousel-inner {
    margin-top: -10%;

    Making the header transparent and getting rid of the line at top (if you wish) and assigning it a z-index of 200:

    .home .tcheader {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    z-index: 200;

    (Notice I used .home – that is because I still wanted the gray line under the header on my interior pages)

    I also moved the nav menu and got rid of the tagline like this (you might not want this in yours if you want your menu centered – there is a Snippet in the theme documentation for centering the navigation, I wanted mine to float right):

    /* Remove the Tagline */

    .navbar-wrapper .navbar h2 {
    display: none;

    /*move navbar up a bit*/
    .navbar-wrapper {
    margin-top: -20px;

    /*float nav bar right*/
    .navbar .nav {

    Also got rid of the navbar box:
    /* Remove Navbar box */
    .navbar .navbar-inner {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    So everything looks pretty good (have not figured out how to add the transparent box behind menu items yet)

    . . . EXCEPT when I start resizing my screen. The nav bar is wrapping wrong. I think this is a media query thing and I need to dig into those but if anyone has already invented that wheel I’d love to hear about it!

    I also tried rehooking the slideshow to the very top of the page (there is a snippet on the site documentation for this too) but that pushed the logo and nav bar under the slider , so not so helpful for what we are trying to do. I decided to go back to the negative top margin method…

    Help welcome…

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘logo and navbar over slider’ is closed to new replies.