I hope you don’t mind me raising this topic again! I’d be interested to hear if anyone is willing to share how the style of transparent header/menu shown on links below can be created with BB.
I know that the topic has been raised on the forum on a few occasions and that it’s maybe beyond the scope of the support team although I’m sure it would go down very well if we could get some help.
I use Microthemer so that’s a possibility if I need to do that.
This could be mission for the illustrious Colin!
As I mentioned in an earlier post this a trend at the moment and just to prove my point here are a couple of examples of what I have in mind
I could help you with some CSS to accomplish that but I would need more information about the site you are building like what your header looks like, if you have a menu on the right or on the bottom, or if you have texts on the right side of the header and stuff like that. It pretty much involves setting a negative margin on your content to move it upwards and changing the z-index of the things in your header so they’re still clickable. If you still need help, you can send over your site URL as well as admin access via private reply so I can check.
I’m due to start work on a couple of new sites in the next week and wanted to create some mock-ups to show client so nothing is set in stone at this point.
At this point the first site is a blank canvas, I’ve created one page and installed BB theme and plugin and that’s about it.
I’ll add a main image to the media library and send over login access. The layout header/menu I have in mind at this point is as http://vitruvianstudio.com/
From there hopefully it will be a case of coming up with some CSS variations to achieve the various options you mentioned for other sites/designs.
I got it to work exactly as how http://vitruvianstudio.com/ did it. I’ve placed the CSS under the Theme Customizer > Code > CSS so you can study it. I also added a class of first-row on the first and only row on the page.
Will it be possible to assign the style to specific pages, possibly home page only?
Yes, it is possible to assign specific CSS to certain pages. If you examine the body tag, it contains a lot of classes which includes a page-id-#. This page-id class is unique for each page so you can target that to apply your CSS for that page only. There is also a specific body class home for the homepage. Take note though that this applies to the BB theme, not sure if all themes do this as well but most likely they do.
Thanks for helping, that works great. I’ll just need to work on assigning this to the home page only and also to set specific nav text font colour on the home page and inside pages.
Glad you figured it out Alex! I’ll be posting a CSS snippet on this thread soon so you may want to check it out and provide feedback.
No, you don’t need to have 2 logos for it to work, Chiu. I believe you are referring to having a fixed nav bar. There are actually 2 headers on that layout and it uses the same logo. The 2 headers have different classes so we can target them specifically.
I’m going to be posting a CSS Snippet on this thread so anyone who visits it will immediately be able to use it, regardless of what header layout they use, hopefully.
Set the header and nav backgrounds to none under the theme customizer then add these CSS snippets to achieve the transparent header/menu like the sites above.
Comments and feedback are always welcome. Happy site building with The Beaver!
Edit: This is not mobile/tab optimized. You might need to wrap this with media queries for that.
Edit: Edited snippet to reflect theme customizer settings
Hi Ben, thanks for latest update on this, I’ve tried this and it works fine. I’ve edited slightly to assign to the home page only by adding page ID. As I say it works although I can’t say that it’s coded as you might do it. I ve also added some CSS below to achive white nav text for this page only.
Can you say what might be needed to achieve media queries?
/The Beaver’s Transparent Header/
.page-id-13 header.fl-page-header-primary {
position: relative;
z-index: 1;
background: none;
}
.page-id-13 header.fl-page-header-primary .fl-page-header-wrap {
border-bottom: none;
}
.page-id-13 .fl-page-content {
margin-top: -211px; /Change this to the height of your header/
}
/* =Main Menu Home Page
-------------------------------------------------------------- /
/ Navfont */
.page-id-13 ul#menu-main-menu-1 a {
color: #FFFFFF !important;
}
what I mean regarding 2 sets of logo is that on this page where there is transparent header the color of the logo font is white: http://vitruvianstudio.com/
I see what you mean. There are, in fact, 2 logos that are involved there. One with the white text and the other with the black text. What happens is he hides the main logo via CSS then puts a background with the black logo image, creating the illusion that the logo changed. This is already more of a CSS problem rather than on BB.
Edit: You don’t need to have 2 logos for the transparent header to work. It all depends on the design you have.
Your code snippet for transparent header works fine for desktop. Could you give me a hint how to adjust margins and offsets for smaller devices? Thanks a lot.
Sorry but it would be hard, if not impossible, to write a generalized code which would apply to all layouts and is mobile optimized. You’ll want to add media queries to adjust CSS for medium/small devices. More of that here. This shouldn’t be so hard anymore since you already have the element classes you need.
I see you control the background color of the nav with some information inserted in the database that read as follows:
UPDATE databasename.wp_options SET option_value = ‘a:5:{i:0;b:0;s:17:“fl-header-bg-type”;s:6:“custom”;s:18:“fl-header-bg-color”;s:7:"#ff0000";s:12:“fl-logo-type”;s:5:“image”;s:13:“fl-logo-image”;s:79:“http://domain.com/wp-content/uploads/2015/06/Logo.png”;}’ WHERE wp_options.option_id = 3045
I added a red background just to find it in the database.
Is there a way we can modify this so that it doesn’t apply a background color to the header.
The solution presented above in CSS uses a margin trick which seems redundant to me, would be a lot easier if you either add the option to select transparent in the Customizer or if we can just edit the snippet above to solve the problem.
