Header changes

1. How can we remove the subheader space altogether if we're not using a slider in page options, but instead the slider is inserted into the page to the left of sidebar?

2. How can I change the background color of the menu, full width? So specifically, I want the background of the menu to blue the full width of the screen, while the space above it is still white. I'm using the Stack Left menu option.


Thanks,
Rob

Comments

  • Hi Rob,

    1. You can do it in Theme options > Layout > Header section. There is option named "Subheader | Visibility".

    2. This is unfortunately not possible. Or you change whole background color or whole stay white. It is not possible to split them.
  • Regarding #1, I'm sorry. I'ts not the subheader I am trying to remove. It is the header image. I have it boxed in red here: http://awesomescreenshot.com/0f74gcfkd0

    I actually just wanted to shrink it. It's too thick the way it is. I firebugged it and found the class. I used this css:

    body.header-stack:not(.template-slider) #Header {
    min-height: 250px;
    }

    It worked in Firebug, but it had not effect when entered in Custom CSS in theme options.

    So how can I make the header image space shorter (as on not as tall)?

    Regarding #2, I was concerned that may be the case. This client wants a blue background spanning across the full page behind the menu. It may be a deal breaker for them, so I may have to abandon this theme, which would suck because it's a great theme. But I see the header/menu customization always being a limitation in the build-your-own themes, like BeTheme. The only one I've seen that truly let you create the whole layout, include the header/menu, from scratch is Headway and Ultimatum. Do you know of any others?
  • #1 To remove this part of header, please go to Theme options > Layout > Header section and turn on "Header | Minimalist" option.

    #2 No, we don't know any other. But if you will show us what you exactly mean (screenshot with explanation) we'll be able to tell if you if this can be accomplished with this theme.
  • edited February 2015
    #1. Thanks that worked, but if I just wanted to make it not as tall with custom css, as I was trying to do with the code I showed you that I was using, how can I do that (since the css I used worked in Firebug, but not on the actual site)?

    #2: Sure. See this screenshot: http://awesomescreenshot.com/0ef4gv5aaf
    I want to make the background behind the menu blue like in this screenshot.

    #3: Alternatively, I tried to make the subheader blue, but the theme options for it don't seem to be working.
    Here's my theme options for subheader color: http://awesomescreenshot.com/0834gv65cd
  • 1. You can try to use just #Header and also you can use !important declaration for value.

    2. If you will send us url to page where you got it, then we'll be able to see if this is possible.

    3. Do you use "Custom" skin or one of pre-defined? Because custom colors works only with custom skin. If you use pre-defined skin then those colors can be changed within custom css only.
  • 1. I tried both. Neither are working. Can you check it out and provide me the exact CSS to change header height?

    2. Sure. http://dev.thinkreliability.com/  I'd like the space behind the menu blue full screen.

    3. Ah. That was the problem. I switched to custom colors and my colors are working now.


    Thanks,
    Rob
  • 1. We tried below code and works on 100%:
    body.header-stack:not(.template-slider) #Header { min-height: 250px !important; }
    On your side, code does not work properly because you have errors in your custom css section. Put this code as 1st and you will see it will work.

    2. With your current setting background can't be changed for menu only because this is one big section where whole header is (logo, search, etc).
  • #1. Ah I see. You are right. I had the right CSS but I had it at the bottom of custom css. I moved it to top, and it worked perfectly. I've never had to move a line of css code to the top to make it work. I would have never guessed that. If you don't mind me asking, why does it have to be at the top for that particular line of CSS to work?

    #2. Thank you.
  • #1 Because somewhere in other lines you did mistake and after "incorrect" line of css, nothing works.
  • This is the only other CSS I entered in custom CSS, and it all worked as I intended it to:

    .menu-highlight.header-stack #Top_bar .menu > li > a span:not(.description) {
    font-weight: bold;
    }

    #Top_bar .menu > li > a span:not(.description) {
    font-weight: bold;

    h1, #Subheader .title, .text-logo #logo {
    font-size: 50px;
    line-height: 50px; }

    Which part of this is wrong that prevented the edits to body.header-stack:not(.template-slider) #Header  from working at all?

  • And you don't see the error in above css? Please take a look at 2nd declaration. Where is closing bracket?
  • Ah. You are right I completely missed it.
Sign In or Register to comment.