Header changes

leadoptimize · February 2015

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

Albert · February 2015

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.

leadoptimize · February 2015

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?

Albert · February 2015

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

leadoptimize · 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

But the default keeps showing, as you see here: http://dev.thinkreliability.com/root-cause-analysis/education-for-root-cause-analysis/public-workshops/

Albert · February 2015

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.

leadoptimize · February 2015

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

Albert · February 2015

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

leadoptimize · February 2015

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

Albert · February 2015

#1 Because somewhere in other lines you did mistake and after "incorrect" line of css, nothing works.

leadoptimize · February 2015

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?

Albert · February 2015

And you don't see the error in above css? Please take a look at 2nd declaration. Where is closing bracket?

leadoptimize · March 2015

Ah. You are right I completely missed it.

Header changes

Comments