Different menu on Main Page and subpages

  • Resolved mikeusru

    (@mikeusru)


    10 years, 8 months ago

    Hi All,
    My navigation menu has no backgound since I have it positioned over the slider with

    /* Make Navbar hover over slider */
.home .tc-header.clearfix{
    position: absolute;
    background: none;
    border: none;
}
.home .navbar .navbar-inner {
    box-shadow: none;
    background: none;
}

    The problem is, this makes the navigation menu look weird on pages without a slider. Short of changing the background of the site, is there a way I can get a different navbar or header on the other pages of my website? or maybe have a floating navbar which has its own background, as long as it’s not on top, like on https://www.macrotive.com/?

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

  • I am not an expert…but doesn’t the code above only apply to the home page?

    Anyways…you can set different css rules by page id…

    Sorry…didn’t complete my thought in above post…

    Start your css selectors with .page-id-#
    Replace # with your actual page id number..

    Thread Starter mikeusru

    (@mikeusru)

    Thanks, deputy! I didn’t realize before that the .home was addressing the homepage CSS.

    I’m also using the Center Header Block Items snippet to customize my navbar, but this ends up overriding the .home css code (regardless of whether the .home code is placed above or below). Any idea how to fix this? I realize i can set .page-id-#’s to the navbar code, but I essentially need it to apply to all the pages except the homepage.

    As I said above, I am not an expert…I am still learning…I try to help point people in the right direction, hopefully not giving out misinformation along the way…I really struggle with php and have not had the time to really dig in and learn it yet…with that said…

    I am not familiar with the center header block snippet, but afaik you should be able to restrict it to certain pages as well…but I cannot say for sure…and I am just not talented enough to help in this case…sorry…

    So…just be patient until the real experts come along…

    Don’t see a link to your site? I’m having DNS problems so may not be able to see it.

    You could also look at using a ‘sticky’ header maybe?

    If you’re not bothered about IE8 (which doesn’t support it) then you could use the not pseudo class. If you are bothered about IE8, then you can add one rule for all pages and then add another rule for the home page and use !important on it.

    A bit hacky … and make sure you comment the CSS so you can remember why you did it in the future.

    Thread Starter mikeusru

    (@mikeusru)

    Thanks –
    My site is https://reaxns.com/

    I think i’ve tried playing with the sticky header and it didn’t quite work for me, but i’ll give it another shot.

    ElectricFeet – the ‘not pseudo class’ sounds like it can get it done, thanks! I’ll try my best to implement it ??

    :not(.home) .tc-header {
    min-height: 80px;
}

    seems to work.

    BTW, you need to add a z-index declaration to the .brand.span3 selector in your stylesheet, now that you’re overlaying it with the navbar. Otherwise your logo isn’t clickable. z-index: 250; should do it.

    Thread Starter mikeusru

    (@mikeusru)

    Thanks ElectricFeet, your solution worked great! I added the code

    /* Add background color to navbar except on home page */
:not(.home) .tc-header {
    min-height: 60px;
	background: #ffcc00;
}

    to style.css.

    And thanks for the z-index tip, that fixed the logo link issue as well.

    Cheers!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Different menu on Main Page and subpages’ is closed to new replies.