Removing Banner - Engineer Theme

Classic Themes
1

Hey Everyone

I had another question, so I would really appreciate if someone could help me out. I wanted to remove the banner from specific pages on my Engineer theme. I said hide banner, but the image still is there. I am new to Rapidweaver, so I was wondering if anyone has any CSS code that would remove the banner image itself, but not the menu.

(I have tried this code, but then my menu disappears, which I can’t really have with my website.)

#hero {
display:none;
}

2

Are you wanting to hide the banner image, the title and slogan, and move the rest of the content up to under the navigation bar?

1 Like
3

Yes!!! Exactly as you mentioned!

4

Try this in the CSS area in the right-hand inspector for the page you want it hidden on.

/* Hide Banner Image/Title & Slogan */
.hero-content.container {
    display: none !important;
}
.hero {
    height: auto;
}
5

Hi Don,

It seems to not be working. I tried it, and the image is still there.

14%20PM
14%20PM1084×547 559 KB

The title and the slogan were removed when I did the “hide banner” option on the sidebar. But the Image is still here.

Do you know any other code that could possibly work?

6

Do you have a link to a published version?

That code is working in a test project. RW 8.6.1 with Engineer theme

10%20PM
10%20PM1011×429 54.3 KB

7

I don’t have a published version as of now. It also worked on a test project for me, but on this project it for some reason isn’t working.

Is there any other code that could possibly work? Or is there an reason why it is not working?

8

Without seeing a page where it’s not working, there’s no way to know what code will work. To get that code, I needed to create a new project using the Engineer theme and inspect the page to determine which CSS selector would work.

Since it’s working in a new, test project, then it’s likely something you’ve added to the project.

9

I think I may have found the issue. For my pages, I have changed the Page-Specific Theme to Climate, which is probably the reason why your code is not working, I’m sorry.

Would you know any CSS that would work for the Climate specific page-theme?

10

Yup, CSS is usually different from one theme to another.

/* Climate Theme - Hide Banner Image/Title & Slogan */
#hero {
    height: auto;
}
.hero-content {
    display: none;
}
.hero-background {
    display: none;
}
1 Like
11

Thanks Don! This CSS works!!

12

Was just wondering about something similar and testing out RW8 and Engineer. Is there a way to use CSS to reduce the size of the banner on specific pages? I like it on the ‘home’ page but would either remove (as you’ve show here) or, ideally, dramatically reduce the size on other pages. It’s something that doesn’t seem possible in any of the recent built-in templates. Many thanks for any advice you might be able to offer.

13

The CSS below will change the banner image area to be sized by the content in it rather than being displayed at 100% of the view height (device/browser window). You can place it in the page’s HTML Code - CSS area. It is using padding to adjust how much space there is above and below the title and slogan. Adjust to your liking.

/* Enginer Theme - Banner image sized by content */
.hero {
    height: auto;
}
.hero-content.container {
    height: auto;
    padding-top: 50px;  /* space above the title */
    padding-bottom: 50px;  /* space below the slogan */
}
.hero-background {
	height: 100%;
}
2 Likes
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.