- This topic has 19 replies, 3 voices, and was last updated 7 years, 1 month ago by Jason Westbrook.
-
AuthorPosts
-
March 15, 2017 at 10:15 pm #292597Jason Westbrook
First off I love this theme so far. I have spent quite a bit of time to find a theme that is light weight and gives me the options for my customers to customize and make sites look great using BB. I have a could questions that I can’t seem to figure out.
1. How can I control the layout and design features of BB for transparent headers. I see where I add it on the advanced options etc. But I need to be able to create complex layouts or simple layouts over a transparent header like hero sections, two buttons bellow a heading etc.
2. How would I be able to use a widget are inside the slide-out menu. I’d like to be able to add random headings, video embed and a logo next to the “x” as they leave. Here is an example of the bridge theme with the slide-out feature and I have this developed for another customer but want to be able to do something very similar with Generatepress. http://missiondemos.com/ac/
March 16, 2017 at 9:50 am #292885TomLead DeveloperLead DeveloperHi there,
Sorry for not getting back to you sooner!
1. You would create your hero section using BB, then use these instructions to lay your header on top of your BB section?: https://docs.generatepress.com/article/merging-header-navigation-content/
Have you tried that and it didn’t work?
2. Adding widget areas to the Slide-out navigation is planned for the next release. For now, you could add your own widget area using the built in hooks.
For example, register the widget area:
add_action( 'widgets_init', 'theme_slug_widgets_init' ); function theme_slug_widgets_init() { register_sidebar( array( 'name' => __( 'Slide-out Navigation' ), 'id' => 'my-slide-out-nav', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h4 class="widget-title">', 'after_title' => '</h4>', ) ); }
Then insert it into the slide-out navigation:
add_action( 'generate_inside_slideout_navigation','tu_add_slideout_widget_area' ); function tu_add_slideout_widget_area() { dynamic_sidebar( 'my-slide-out-nav' ); }
Let me know if you need more info 🙂
March 16, 2017 at 1:51 pm #293065Jason WestbrookTom,
Thanks for getting back with me. Could you give me a bit more detail on how to insert that code in #2? Is that in my “additional ccs” area?I’m lost on this one. I read through the gp hooks but Im not seeming to connect the dots here. Sorry.
March 16, 2017 at 2:10 pm #293081LeoStaffCustomer SupportHi Jason,
Both code can be inserted using this method: https://docs.generatepress.com/article/adding-php/#code-snippets
Hope this helps.
March 16, 2017 at 3:05 pm #293102Jason WestbrookOk I’ll try that when I get home. I am assuming once the code is in it creates a new widget in the widgets area of wordpress to add things into? Is that how it works in the end?
March 16, 2017 at 3:20 pm #293106Jason WestbrookAlso….sorry I made the hero section and followed the steps to make the header transparent behind the slider but now I have a transparent gap from my hero section built using BB and the top of the page. How do I remove this huge gap?
March 16, 2017 at 3:30 pm #293110Jason WestbrookUpdate…got the slideout working. How would I style the wigets or text going into it? Is there an easy default? Ideally I’d love to be able to start the content after the “x”
March 16, 2017 at 4:51 pm #293135LeoStaffCustomer SupportYou can try using GP’s built in font awesome icons: http://fontawesome.io/icons/
March 16, 2017 at 5:51 pm #293143Jason WestbrookNot sure if you saw this one….
I made the hero section and followed the steps to make the header transparent behind the slider but now I have a transparent gap from my hero section built using BB and the top of the page. How do I remove this huge gap?
March 16, 2017 at 5:55 pm #293147LeoStaffCustomer SupportOh I thought you got the slider working.
So all the steps were done correctly with the instructions?
Can you provide a link to your site? Hard for me to tell where that’s coming from with just the screenshot.March 16, 2017 at 7:09 pm #293186Jason Westbrooksure. and thanks my friend!
March 16, 2017 at 7:17 pm #293187Jason Westbrooksorry…Im a dummy. I had like 220px in padding in the acutal page settings that was causing that to happen.
Still figuring out two things and I’m out of questions. Sorry to keep on going here.
1. How could I resize the slide out menu icon only?
2. How can I make sure that when I add things into the new slide out widget area that they are below the “X” and will keep things somewhat styled right? I tried a couple things and the text wasn’t readable because it was too dark and the menu module from the widgets dashboard didn’t display the menus all that good. Is this section need alot of css to make it work right?
March 16, 2017 at 7:24 pm #293188LeoStaffCustomer Support1. Try
.slideout-toggle a { font-size: 30px; }
2. Might need some CSS but hard to tell without actually seeing what you have so far.
March 16, 2017 at 7:30 pm #293190Jason Westbrookcheck out demo1.builtonmission.com.
That code worked.What about the icon inside the slider menu? Its still small. I added some stuff in the widget area to show you what I mean.
Transparent header is working fine except on mobile. Its bleeding into the sticky menu and you cant read to test that is actually in the middle of the hero image on desktop.
March 16, 2017 at 7:34 pm #293191Jason WestbrookThought I’d send you this as the example slide out menu I am trying to achieve as close as possible on the bridge theme.
http://missiondemos.com/ac/ -
AuthorPosts
- You must be logged in to reply to this topic.