On a few of my Divi projects, I wanted the logo to align all the way to the left of the screen and the main menu to sit all the way to the right of the screen. For example, check out the site I did for Nick Lemau.
Although there are several ways to manipulate this by using CSS, there is an easier alternative. Make a simple adjustment in the header.php file.
Start by opening up your header.php file in your child theme. If you don’t have one in there yet, just copy the header.php file from the Divi directory, to your Divi-child directory.
If you don’t have a child theme yet, follow these painless step by step instructions I wrote in an earlier post. How to set up a child theme. I would also keep a separate back-up of this file just in case.
Next you will want to locate the following line and delete it all together.
Next you want to find the closing tag and remove it as well. Be sure you are deleting the correct closing </div>Â as there are several closing tags on this file.
Now you may want to have a little padding between the Logo and the left edge so you can add this in your child theme stylesheet.css.
#logo {padding-left: 10px;}
And lets do the same for the main menu on the right.
#et-top-navigation {padding-right: 10px;}
Well that’s all for now. I hope you find this article useful.
Nice job thanks !! Very helpful for me, me van a ayudar tus consejos 🙂
un abrazo desde francia
Hi Geno! I tried what you explain but it doesn’t work… I would like to do the same thing with the header that you did on Nick Lemau’s web, could you pleas help me?
Sure. I will send you an email to get some specifics on your site and we can move on from there. Thanks for checking this out and engaging in the conversation 🙂
Hi Geno! Recently emailed you re: your secondary navigation bar as an image…. Wondering how to do this? Have been looking for a solution for a few months now and you’re the only site that has it. Am using divi theme also. Please advise?
Hi C. Eason. If you are referring to the header I use on this blog page, its mostly CSS. The code below works with a Full Width Header section and is not written for the main header.
1. Create a Fullwidth section and label the CSS Class: blog-fullwidth-menu-section
2. Insert a Fullwidth Header and label the CSS Class: blog-fullwidth-menu
3. Insert the following code into your Custom CSS section located in your panel
.blog-fullwidth-menu-section { background: -webkit-linear-gradient(#B2ADA3, #816F4B); background: -o-linear-gradient(#B2ADA3, #816F4B); background: -moz-linear-gradient(#B2ADA3, #816F4B); background: linear-gradient(#B2ADA3, #816F4B); border-top: 1px dotted #B2ADA3; border-bottom: 1px dotted #816F4b;} .blog-fullwidth-menu #top-menu {padding:0px 0 0!important;} .blog-fullwidth-menu #top-menu-nav > ul {padding: 0px 0 0 !important;} .blog-fullwidth-menu #top-menu li {padding-top: 10px;padding-bottom: 0px;border-right: 1px solid #816f4b; padding-left: 20px; margin-left: -3px;} .blog-fullwidth-menu #top-menu li:hover {background-color:#e3dbb7;} .blog-fullwidth-menu #top-menu > li:last-child {border: none; padding-right:20px;} .blog-fullwidth-menu #top-menu li > a {padding-bottom: 10px;} .blog-fullwidth-menu #top-menu a {color:#FCFCFC;; text-transform: capitalize!important; } .blog-fullwidth-menu #top-menu li:hover a {color:#806f52!important;} .blog-fullwidth-menu #top-menu li.current-menu-item > a {color:#806f52!important;} .blog-fullwidth-menu #top-menu li.current-menu-item {background-color:#e3dbb7;} .blog-fullwidth-menu .fa {padding: 0 5px 0 0;}Then you can begin tweaking the code to match your desired look.
Thanks for replying! Was talking about the word art image at the VERY top of the page, above your logo. Will try this and see if that does it! Thanks!
Unfortunately, that didn’t do what I needed it to. What I was referring to was the image that you have at the very top of your page, with all the words in it. It is above your logo, at the topmost of your page. I was wondering how to insert an image there. No one seems to be able to do it, or explain it.
This is the css I used for that section for that specific page. Remove the page id element and tinker with it to your hearts desire 😀
/* Header – MAIN */
body.page-id-1655 {background-color: #B2ADA3!important;}
.page-id-1655 #page-container {background: url(https://quiroz.co/2015/wp-content/uploads/2014/11/blog-services-cloud-background.png);}
.page-id-1655 #main-header { display: none;}
.page-id-1655 #main-content {margin-top: -30px;}
.page-id-1655 .blog-header-section {padding: 0px 0; box-shadow: 0px -3px 30px 1px rgba(108, 90, 60, 0.65);}
I am pasting that code into the of my blog in divi options, but the code is what’s showing up, not the image I’ve chosen… Am I supposed to be pasting it somewhere else? or am I supposed to re-type the code? Not sure….
I will send you an email.
Hey Geno,
I like what you did with Nick Lemau’s site. That’s very cool. I would definitely try this design on my brother’s site (of course not exactly like that lol). Great design idea!
I do have a question regarding the header. I’m using Divi theme site and used the centralized menu nav bar with the logo on top of it. I was wondering how I can put like a click to call phone number (with telephone icon) at the left side and maybe a facebook like icon at the right side? I don’t want to use the secondary navigation bar. I just want it inline with the logo. Is this possible?
Thanks so much for your help in advance and looking forward for your great suggestion.
Hi Tec. Thanks for checking out the blog. I am glad the site inspired your next design. To answer your question, there are two ways to go about doing what you are suggesting.
1. If you are comfortable with php, you could go in and add some changes to the header.php file and then style using css.
2. The second method which I would probably use since I am not as knowledgeable with php, is to ditch using the default header and create your own header on the page itself using Divi page builder. Using a blank page template, you can create a 3 column section with the logo in the middle and the other two items to the right and left. The on the next section use a fullwidth menu section. Then you can line everything up using custom css. If you want the menu to stick to the top of the page, you can use a plugin like sticky menu https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/
Hope this helps 🙂
Wow! Thanks so much for the fast reply. I think I would choose the second option since I’m not that well familiar with PHP as well. Thanks so much Geno! Awesome! 🙂
Hi Geno,
The website looks just awesome!! I have one question for you: how did you manage to have such a big image on the homepage? I also want that! The background image with ‘He Is Lord’. You would really help me!
Can you please help me?
Thanks CJ. This other tutorial will show you how to do just that https://quiroz.co/ghost-home-page-and-change-menu-background/
Hey Gino! The amount of free content you pump out is astounding my friend. Thank you for it. Might I ask, however if there is anyway to do the above, but retain a central logo?
Sorry Naomi. I have not tried this technique using a centered logo.
No worries Geno, I figured it out… Just needed to move the container clearfix div to surround the logo element only. 🙂
Awesome. Thanks for sharing. It will come in useful. I appreciate you visiting the site. Hope to crank out some more tutorials soon.
just upgraded my site that uses the header.php edit to get the logo and nav pushed to the edges and it broke the site….assume that there has been an update to the header.php so when I updated the master theme, the edited header.php in my child theme didn’t align???
Glad to have you by the site. Did you ever get this resolved? I updated all my sites using this modification and did not come up with any issues. I am wondering if it has to do with something else perhaps in your custom CSS?
Hi Geno! Thank you for this cool trick. And for others too.
There is an interesting effect in your example (https://quiroz.co/2014-Demo/) when main navigation is transparent at the beginning and then changing it’s color and shrinking while scrolling down. It is shrinking by default but what about changing transparency? Can you explain how to add this in DiVi?
Thank you and sorry for my English.
Hi Konstantin. I wrote up another tutorial for that. You can see how I do that here… https://quiroz.co/ghost-home-page-and-change-menu-background/
Thank you very much. I recently discovered your blog and there is A LOT OF information for me 🙂 So I have not had time to read it ALL. I’ll try this tutorial obligatorily.
how can we increase the width of the main menu and logo container
i added a background color in the menu but it has white space on the left and right hand side
check this page
http://demo1.digitalwebsters.com/about-us/
Looks like you got this sorted. I do not see the whitespace anymore 🙂
Hi Geno Quiroz,
This is very informative blog. Please keep going good work.