In this video we look at how easy it is make layout adjustments to Beaver Builder theme. With only a basic understanding of how Bootstrap Grid system works we can gain an enormous amount of control.
Examples from the video
Here is the code from the nav-right.php that is changed in the video:
<div class="col-md-4 col-sm-12 fl-page-header-logo-col">
<div class="fl-page-nav-col col-md-10 col-sm-12">
Here is the code from the fixed header.php that is changed:
<div class="fl-page-logo-wrap col-md-3 col-sm-12">
<div class="fl-page-fixed-nav-wrap col-md-9 col-sm-12">
Here is the information on Bootstrap used in the video.
Posted in Beaver Builder, Website Building
I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.
Thank you for the insight!
I have a website with a very small nav area. When viewing on a tablet in portrait view I would like to keep the logo and nav on the same row. Currently it stacks the logo on top of the nav. Could I fix that with what you are showing by adjusting the “sm12” to a smaller number? Lastly I tried using desktop server to access these files but was unable to setup because of a port 80 issue. I wasn’t sure how to fix so I gave up. Could you recommend an alternative method for me to access and copy the theme files to my child theme?
Thank You!!
Rick
Hi Rick,
Thanks for the question and stopping by. Yes, you have got it with the “sm12” thing you just need to make sure the right (menu) and left (logo/site title) add up to 12. The logo gets proportionally squeezed down to the space available. I hope that works out OK.. To be honest, I’m not absolutely sure as I think there is also some CSS that centers things at tablet size, but let me know if you get an issue.
With the Desktop server issue do you have Skype installed? It got me too, but I see there is and article on it:
https://serverpress.com/resolving-the-port-80-conflict-on-windows-systems-running-skype/
All the best :-)
If I can figure out how to copy the needed files into my child theme I will certainly test this out. I have never like the stacking menu on tablets especially when there is room.
Regarding the port 80 I do not have Skype that I am aware of. I did download the desktop server Port ID tool to see what was using port 80 and it just said system. Different ports had things like event manager etc… so it was easy to id what was what. When I see “system” though I am not even sure what to do. I did go on their FAQ’s and nothing really jumped at me.
Any other ideas on how I can easily access and copy those files?
I sincerely want to Thank You for all of your efforts with Beaver Builder! I have been building websites as a hobby for 6 months. With the help of people like you, a Great Beaver Builder product and a little reading I have been able to put out some very nice sites.
Rick
Thanks so much Rick :-)
Yeah, I agree the default stacking get a bit much on some designs. I’m not sure with the Desktop Server thing. I only got that common problem with Skype so I’m really not sure. Perhaps you can just skip that and do it online on your live server?
Did you pick up from the video that the “parent” files to copy are in your root directory \wp-content\themes\bb-theme\includes and a copy needs to go in root directory \wp-content\themes\bb-theme-child\includes (you will have to create the folder called includes).
Sorry I have not got something more helpful for you. :-(
Great tutorial, did not know how to do this until now. Thanks!
Peter
Thanks Peter. I’m quite liking this move to the Beaver Builder Theme and to Bootstrap. Things seem more logical and tidy. Is it the same for you? The silly thing is I think it was the Beaver mascot that stopped my thinking of it as a serious option rather than anything else.
Yes, if I look ‘back’ to the Genesis/Dynamik way of doing things, I can not believe it anymore that everything there seemed so logical at that time. Now that we stepped into BB theme and plugin, a whole new meaning of ‘logical’ seems to grow ;-)
Peter
Hi David, thank you for this video. I have tried it and it works for me, but could this not be done with CSS?
– Johannes
Hi Johannes. Thank you. Yes, I am not entirely sure that overwriting the Bootstrap CSS might not be better. This just seemed a relatively easy way for some basic stuff. It probably says more about me and my interest in poking around in the theme files ;-)
Thanks for sharing David, this is how i have been adjusting my fixed header area sizes. I have found I use the BB fixed header alot and use a custom layout in my templates and in customizer select, none. I also use Themer as well but i have found it is difficult to make the themer header work for my designs unless it is straight up logo and menu! I am hoping BB can revamp the way the header works in customizer to allow more control in customizer. Hope all is going well David!
I hear you Johnny. I am trying to switch to Themer headers just to give client access in editor mode, but I am realising it is easier to do two (or more) versions for responsive design and hide what is not needed. Not very clean but speedy to do. Most people would want to get client away from them (wise), but I’m starting to sell self management more.