WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[closed] logo and navbar over slider (23 posts)

  1. Ryan0101
    Member
    Posted 8 months ago #

    Hi,
    I'd like to put logo and navbar over slider.
    Can someone suggest me how, please?

    Thanks.

  2. rdellconsulting
    Member
    Posted 8 months ago #

    Take a look at the Snippets and you should find something to help

    This one is probably what you want.

  3. Ryan0101
    Member
    Posted 8 months ago #

    Thanks Dave,
    I'll take a look immediately.

  4. Ryan0101
    Member
    Posted 8 months ago #

    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.

    Thanks.

  5. Andrew
    Forum Moderator
    Posted 8 months ago #

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

  6. Ryan0101
    Member
    Posted 8 months ago #

    Here an example on what I'd like to achieve: http://unity3d.com

  7. Andrew
    Forum Moderator
    Posted 8 months ago #

    Could you link your site too?

  8. Ryan0101
    Member
    Posted 8 months ago #

    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.

  9. Ryan0101
    Member
    Posted 8 months ago #

  10. Andrew
    Forum Moderator
    Posted 8 months ago #

    Try using this CSS:

    .tc-header {
     position: relative;
    }
    
    .tc-header .brand .site-logo {
     position: absolute;
     bottom: 0;
     z-index: 201;
    }
  11. Ryan0101
    Member
    Posted 8 months ago #

    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!

  12. Andrew
    Forum Moderator
    Posted 8 months ago #

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

  13. Ryan0101
    Member
    Posted 8 months ago #

    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!!!

  14. Andrew
    Forum Moderator
    Posted 8 months ago #

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

  15. Ryan0101
    Member
    Posted 8 months ago #

    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!!!

  16. katiesutton
    Member
    Posted 8 months ago #

    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%;
    z-index:-1;
    }

    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 {
    float:right;
    }

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

  17. katiesutton
    Member
    Posted 8 months ago #

    A clarification: it's not really the nav bar that is wrapping wrong - it's just a responsiveness issue stemming from the top margin adjustment. I am now in the painstaking process of manually adjusting it based on the queries set out here:
    http://www.themesandco.com/snippet/media-queries-responsiveness/

    I think this method works for getting the logo and nav on top of the slider, but if there is a simpler or more elegant way to do it, I'm all ears (or eyes, more accurately).

    I'd also be interested in the code for the styles of the Unity nav bar if you get there.

  18. Ryan0101
    Member
    Posted 8 months ago #

    Hi Katie, thanks for your efforts.
    I'm just trying your css in my child one and it works except for the navbar on top of slider effect.
    I'm testing it with chrome and safari both the latest version.
    here you are my css file filled with your code:

    /*
    Theme Name: customizr-child
    Version: 1.0
    Description: A child theme of Customizr
    Template: customizr
    */
    
    @import url("../customizr/style.css");
    
    /* NAVBAR ON THE TOP OF THE SLIDER */
    
    /* Adjusting the top margin of the carousel */
    .carousel-inner {
    margin-top: -10%;
    z-index:-1;
    }
    
    /* 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;
    }
    
    /* 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 {
    float:right;
    }
    
    /* 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;
    }
    
    /* END OF NAVBAR ON THE TOP OF THE SLIDER */
  19. katiesutton
    Member
    Posted 8 months ago #

    Hi Ryan,

    Class style should be:

    .home .tc-header
    NOT .home .tcheader

    I apologize, I made a mistake when I typed in my code above - it was late!

    That change should make it work for Safari and Firefox ... interestingly, it still won't work in Google Chrome and I need to dig into that a bit.

    I also decided to take out the float right navbar code and the code to move navbar up a bit and use the relevant code from this snippet.

    Worked beautifully - I may have added some margin between each menu item too.

    And now I am using the following media queries - when the screen shrinks below 979 I don't want the image under the header stuff anymore, it just stacks like the demo site. Have not tested on all devices but it's a start.
    (This time I will cut and paste!):

    /*slider responsiveness */
    
    @media (max-width: 1200px) {
     .carousel-inner {
    margin-top: -112px;
    }
    }
    
    @media (max-width: 979px) {
    .carousel-inner {
    margin-top:0px;
    }
    }

    If anyone knows how to make this work in Chrome please post...and I am afraid to check IE!! I considered hooking the slider to the top of the page and then putting the header items in that div but I don't want them in there when I resize it for small devies so wasn't sure if that would be more trouble than not (although I suspect it would solve the Chrome issue).

  20. Ryan0101
    Member
    Posted 8 months ago #

    Hi Katie,
    I made the change you suggested, but it nothing change.
    I re-up here my css, (it's definitely kiddin' me!).
    Anyway, thank you very much Katie!

    /*
    Theme Name: customizr-child
    Version: 1.0
    Description: A child theme of Customizr
    Template: customizr
    */
    
    @import url("../customizr/style.css");
    
    /* NAVBAR ON THE TOP OF THE SLIDER */
    
    /* Adjusting the top margin of the carousel */
    .carousel-inner {
    margin-top: -10%;
    z-index:-1;
    }
    
    /* Making the header transparent and getting rid of the line at top (if you wish) and assigning it a z-index of 200 */
    .home .tc-header {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
    z-index: 200;
    }
    
    /* 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 {
    float:right;
    }
    
    /* 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;
    }
    
    /* END OF NAVBAR ON THE TOP OF THE SLIDER */
  21. ashu8000
    Member
    Posted 8 months ago #

    Hi, I am trying to figure out the same thing . Any help appreciated.This site has done the same but menu is not transparent.Apart from that there is a big white space above slider in mobile devices.

  22. mikeusru
    Member
    Posted 1 month ago #

    Did anyone else get this solved by any chance? I'm trying to get a navbar over a slider, similar to http://www.macrotive.com/

    Any help would be greatly appreciated.

  23. esmi
    Forum Moderator
    Posted 1 month ago #

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else's topic.

    I am now closing this 7 month old topic as it references an older version of WordPress.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic