I have been researching how to get rid of some white space at the top of my page for 2 hours and could NOT find the answer on any forum or any video... UNTIL THIS ONE! THANK YOU!!!!
I´m in South America, Peru. I'm thrilled to start my own Webpage from scratch. I didn't have a start point and now I do. So thank you for all your tips and tricks that you are given us.
Love watching your tutorials. I started watching your tutorials last week and aiming to watch all your podcast this week. I also find your contributions to Divi Chat informative. Thank you for giving your valuable time, knowledge and expertise to the world. Tricia
Thanks so much for the feedback, Tricia! Much appreciated. I've got some really cool things in the work (courses) that I'm super excited about which will take all this to the next level! Keep in touch for all that if interested!
Awesome. I do have several blog series that I wrote for the Elegant Themes blog that may help so feel free to refer back to these if they look like they'll help! joshhall.co/josh-hall-elegant-themes-series-archives/
Josh you are amazing… this is the first of your tutorials I’ve watched and I’m hooked! My brain loves the speed you do everything at… slow tutorials make me start multitasking, but I’m subscribed now cause spookily you have some great stuff I need right now!! I’ll get round to buying you a coffee or better when my latest project pays off
I love your mission statement Mr. Hall...Had the pleasure of watching this tutorial last night and it's steller. Had to come back this morning and subscribe! Thanks for taking on the task of helping budding Divi designers...I feel so blessed....May the Lord keep and bless you and yours mightily!
Awesome, thank you so much Josh, I have been trying to learn CSS for quite a while. Well, it's taken until now for the "penny" to drop, better late than never but extremely grateful so thanks for sharing.
Great to hear, Nat! Yeah CSS can be intimidating but once you get going with it and understand a view basics, it's really not that bad! I LOVE it now. Have fun diving into the CSS waters :)
Well done and Brilliant!!! Thanks for sharing, save me a lot of time! I would suggest let div control the color of the icon and text incase you change through the customize feature.
Just found you Happy I did, great tutorial! PROBLEM though- I can't get the social media icons to stay to the right-- after I change the css, Do I have to add the code to the style sheet for it to stick?? (where is this style sheet stored?)
Awesome video! What if I want to make the top contact menu as you have but with a slide-in primary menu using the theme customizer? I set it to secondary and it the contact details go below the menu items in the slide-in menu
Great tutorial. But you could face an issue while scrolling down (your hover color could come back to it default color). In that case don't just forget the ''Important!'' after color.
Hey Josh! I tried it step by step and its working fine. First of all thanks for this video. I have two questions, 1. How can I move the email, phone number and social icons to complete right side? 2. How to add and customize phone number email social icons to the primary menu bar? Is the process the same?
When I go to Customize it shows Header and Navigation for a split second and then it disappears. This is with Divi installed. Any idea how to get to it? I am trying to make a few of the secondary menu links into buttons. This video is amazing BTW!
This is great if I could get it to work... when I add the secondary menu, it is under the main nav menu and is in a list?? I want to have it just like you have it up top in the color bar.
ok I fixed this if anyone else has this issue it is in the customizer, header-navigation, secondary menu bar, then clicked the make FULL WIDTH. After I added your code and made the new menu, I went back and clicked off full width. Not sure why this worked but it did.
Need this right now, but am totally stymied because I cant find where or how to Open The Style Sheet that you are using. Where is it??? I cant find how to get to it, or save any changes made to inspect element bits.
Hi Josh, amaaaaaazing tutorials. Thank you so much. Do you actually know the css snippet to change the link color and hover color in the submenu of the FIXED (STICKY) header. I am not able to change it somehow.... All help would be highly apreciated :) Greetings from Germany!
Not yet. I haven't used the Theme Builder much myself to this point. But that's the plan for the near future so keep an eye out! And if you want to sign up for my mailing list, you'll know as soon as the next tutorial drops: joshhall.co
Hey Josh, for some reason on my end the "select a menu to edit" option is not appearing. Does it have something to do with a specific theme? What could you recommend to make sure the menu to edit option would appear? Currently, I see it says your theme supports 3 menus, maybe that's why it's not appearing on my end? Thank you!
Great tutorial. Thank you, Josh. I'm curious how I would separate two items in the top header so that one is flush with the right side of the page and the other is flush with the left side of the page?
Thanks Stephanie! Haven't done that but I think probably have to do some custom CSS work to separate 2 elements. It would probably require adding in a custom divi into the header.php and styling that separately.
Hmm. Do you know of any tutorials that explain how to do this? I see it all the time on websites. I feel like it should be pretty straight forward but that's often not the case with web development :-)
Not sure Steph - haven't seen any that go over that exactly. You're welcome to post the question in my Divi group if you'd like! Someone may have done that before or you'd most likely get some code. If you're not already a member, feel free to join here! facebook.com/groups/diviwebdesigners/
Great vid, thank you. However, I still cannot find where to access those social links in the top header so that I can add another. All you showed was copying and paying the code but did not show where I can find this within WP admin. Can you please explain where to access this top header where the socials are? They are not in the secondary menu links where you were adding the phone number, etc.
Hi..Thanks for this lovely and helpful video.. Question: in the secondary menu bar, the phone number and email icons, actually take the user to dial the number or to their inbox as a link, how can we add that same kind of link back in the custom links? Will appreciate your guidance!! Thanks !!
Hi Josh. I used CSS code to hide the top header but the problem is when the page load slowly, it's still show the top header a bit until it's finished. How can fix it ?. Thanks.
This is the first of your videos I've seen - amazing! Loved how were able to rearrange the social media icons so effectively using a bit of CSS. Also, cool name by the way lol
Hi, Josh. Superb tutorial. Wonderful clean look for this header. I am using this for the second time--for a new client's website. As before, it looks great on desktop; however, the menu is absent again on mobile. Do you know what I might be doing wrong? many thanks.
Thanks Dave. You're not doing anything wrong, the top menu goes into the main menu on mobile. Unfortunately you'd have to do some custom code to find a work around for that unless you use a 3rd party plugin to customize it.
Hello Josh, sorry if this question was asked but how can you make that phone number tap to dial? I don't see a way to put the code in to do that. Is there a way to do it?
I love your tutorials. Would you be able to let me know why the icons break if I use the css you mentioned above in a Divi child theme?? The icons turn into weird characters.
Thanks! It's probably a width issue. Check out my revised method of putting icons in here in this post! joshhall.co/how-to-add-icons-to-your-divi-menu/ You can actually do it now without setting the width which should help keep those icons from breaking. Other than that, it should work fine child theme or not!
this video is from 2017 but it's very useful and just so that I ask : I have hared a lot of comparisons about Divi and extra for blogging but I prefer Divi over extra thanks to the tremendous amount of plugins for it but one thing I like about extra in particular is the secondary menu trending posts and hamburger menu options. is there any way to add that manually to Divi, instead of showing contact info? there isn't that much talk about the top header bar so thanks for this one
Hi Josh, I have the custom CSS in my Divi child theme and referenced it in the Secondary Menu, as it is in the tutorial but the icons are still not showing.
Absolutely! Welcome to the best theme and community online :) If you'd like to join my FB group, here's the link: facebook.com/groups/diviwebdesigners/ Best community online and tons of free support. Just mention I gave you the link to join if you request.
Hi Josh Thanks for your great CSS tips...I have been trying this one and am getting an Inline-Block error that says I cannot use a "float" with it. What am I doing wrong?
Ahhh! Found it in a comment on his website. Comments under the tutorial joshhall.co/how-to-customize-the-top-header-in-divi/ the “display: inline-block;” shouldn’t be brought over. should be only: #top-header .et-social-icons { float: right; } Tevya on October 24, 2017 at 6:16 pm Thanks for this! Very helpful. A great tutorial I’m sure I’ll refer to many times when people ask about this. One little caveat: when overriding styles, best practice is to only include those styles that you changed. So in your very first example, the “display: inline-block;” shouldn’t be brought over. Just the float that was actually changed. So, it should be only: #top-header .et-social-icons { float: right; } That makes things cleaner and if you’re editing stuff later, and won’t potentially override something else and create confusion.
This works well for desktop views, but on mobile the top bar is not visible and the secondary menu items get added to the primary drop down menu. The icons and their .before really makes a mess in that situation. I'm not seeing an option in the theme customizer to keep the top bar visible on mobile. What is necessary to make the top bar stay visible ?
Yeah the top menu displays in the menu with Divi unless you do some custom code. Unfortunately unless you're using a plugin custom CSS is the way to go here.
@@JoshHallco Thanks. Informative video. I notice that (of course) the nice sites you showed avoids this issue, mostly by having the topbar stay visible and adapting to the size. Not a simple thing to do.
Hi Josh thanks for a great video. Is there a way of adding other social media icons to the primary menu bar? I'm looking at adding Instagram to the primary menu.
OK... as of yesterday I switched from (MT) Media Temple and Elementor to SiteGround and DIVI. I made my website and installed Let'S Encrypt all cool stuff and blindingly fast compared to (MT). SO here's the question "I'm no geek so custom CSS is out of my comfort zone BUT really important. Found your post by TH-cam margin ad and it's really interesting stuff. Love the Search and improve approach. Where do I start if I want to follow your tuts on DIVI Custom CSS styling as I haven't yet found this type of tutorial /info around... Great stuff Subscribed and Liked!
Thank, Paul! I responded to another comment but I'll be coming out with a CSS course next year. You can check out the other links I mentioned to hopefully get you going for now!
Josh. I was finally able to setup everthing as your instructed in your Css video. I'm using PC. I make my changes, save them adn then when i purge and refresh, it reverts back to the original (in particular, trying to move the social icons to the right). When i open up the CSS file, the chagnes are there but not reflected ont he website.
Josh Hall Thanks. Im on Siteground. Your instructions are spot on, I reckon its just slow updating. Do you recommend caching everytime i save my style css?
Yep, unfortunately you have to clear that every time you make a css change. The cache helps with faster load times but it is a pain sometimes when making CSS changes.
Josh Hall Im being indoctrinated by cache fire, lol. I spent easy 30 minites changing text color and font size, finally gave up and decided to come yo work. 15 mins later, pulling into wk parking lot, checked the site on my phone...and THE CHANGES TOOK! smh lol
Thanks Josh a lot for this tutorial. However when i change the float to the right for the social icons, it says float can't be used with display: inline-block :( why it did not work? Thanks for your come back ;)
When overriding styles, you should only include the styles you changed. The line “display: inline-block;” shouldn’t have been brought over, just the float that was actually changed. Just bring over: #top-header .et-social-icons { float: right; } and you should be OK.
Hi Josh, Thanks for this video. It is very useful. Just one question if I want to add Text Us link to the top menu the "Custom Menu" is not accepting this code "sms:777-777-7777". What should I do instead? Any solutions?
I'm actually not sure on text. Maybe someone who sees this who knows can chime in. I would think that would work as well but I've had issues trying to make a text link as well.
As long as the CSS isn't in the main Divi theme stylesheet, you're all set. That's why I always recommend putting custom CSS in a child theme stylesheet. Even if the code is in the various CSS options in Divi, you're all set too. I have a tutorial in the works on all that!
Ok... I realized it doesn't work when i paste the code inside my child theme editor. But does work when I paste it inside the Divi's Custom CSS editor, which I know is not a best practice. Any help please?
Hi, Josh, and everyone, has anyone else had a problem with the code translating to mobile devices? For me, there is nothing showing...Thanks in advance for any help. :)
thank you so much! i actually figured it out. i didn't know the secondary menu check box was for that top header, never touched it til today. love your tutorials!
Hey Josh I really like all your divi tutorial but when I'm working on a website from the inspect element it's fine, but when i copy the code on my custom css, it does not take any effect i don't know who you do your.
Hi Emmanel, I’m actually putting a tutorial together on that soon but in short, I connect through FTP right to my stylesheet then open it up in my text editor. I use TextMate2 as my text editor and use Transmit for Mac to connect through FTP. Let me know if that helps for now!
Now I'm waiting with bated breathe for this one...Been thinking of doing this myself, not sure how it would work...I love WordPress, but the editor is crap.
I'm also curious about this. How are you accessing the stylesheet if it's in the database? Would love to know how you set up your stylesheet so that you can access it directly via FTP, this would be a huge timesaver.
Going to put a tutorial together on that but this should help for now! divi.space/divi-tutorials/how-to-extend-the-divi-social-media-icons-using-font-awesome/
Working with Divi for about a year and a half and building WordPress sites for five years, I find this tutorial is one of the best I've ever seen!
Thanks so much, Spencer! Really appreciate that. Doesn't get any better than Wordpress and Divi. Onward!
You're most welcome! I agree Divi and WordPress are like peanut butter and jelly, or chocolate and caramel!
2.5 years later this is still working like a charm. Josh you are a coding god....I am crazy jealous of your skills
Thank you very much. I'm learning Divi today and this video still relevant in 2023
Thank you! I plan on doing some more Divi tutorials once 5.0 drops!
I have been researching how to get rid of some white space at the top of my page for 2 hours and could NOT find the answer on any forum or any video... UNTIL THIS ONE! THANK YOU!!!!
I´m in South America, Peru. I'm thrilled to start my own Webpage from scratch. I didn't have a start point and now I do. So thank you for all your tips and tricks that you are given us.
I do not know the abc of css but the way you teach and demonstrate is really amazing never seen such a great teacher and mentor, Love you to much!!!!
Just want to let you know, you are one of my "CSS Heroes". Thanks for the great work!
haha thanks, Charles! I used to hate code and CSS but I love it now. Glad to hear that the tutorials have helped you out!
Love watching your tutorials. I started watching your tutorials last week and aiming to watch all your podcast this week. I also find your contributions to Divi Chat informative. Thank you for giving your valuable time, knowledge and expertise to the world. Tricia
Thanks so much for the feedback, Tricia! Much appreciated. I've got some really cool things in the work (courses) that I'm super excited about which will take all this to the next level! Keep in touch for all that if interested!
Josh Hall , I will be looking out for the course. I’m new to Divi, purchased lifetime membership so am serious about making a future with Divi.
Awesome. I do have several blog series that I wrote for the Elegant Themes blog that may help so feel free to refer back to these if they look like they'll help! joshhall.co/josh-hall-elegant-themes-series-archives/
Josh you are amazing… this is the first of your tutorials I’ve watched and I’m hooked! My brain loves the speed you do everything at… slow tutorials make me start multitasking, but I’m subscribed now cause spookily you have some great stuff I need right now!! I’ll get round to buying you a coffee or better when my latest project pays off
Awesome! Thanks for the comment :)
Episode wiwiir
I love your mission statement Mr. Hall...Had the pleasure of watching this tutorial last night and it's steller. Had to come back this morning and subscribe! Thanks for taking on the task of helping budding Divi designers...I feel so blessed....May the Lord keep and bless you and yours mightily!
Thanks, Adrienne. Really appreciate your feedback!
Awesome, thank you so much Josh, I have been trying to learn CSS for quite a while.
Well, it's taken until now for the "penny" to drop, better late than never but extremely grateful so thanks for sharing.
You make it look so easy Josh! I might even venture into those scary CSS waters after watching a few of your vids, taking a deep breath. Thank you! x
Great to hear, Nat! Yeah CSS can be intimidating but once you get going with it and understand a view basics, it's really not that bad! I LOVE it now. Have fun diving into the CSS waters :)
I love josh so much. He is one of my reason why I want to become a designer. I learned a lot
Josh, this is an awesome video. Clear, concise, and really helps to get this stuff done. Thanks and subbed!
Thanks so much for the comment and feedback! Much appreciated!
I'm an intern in a Web Development company and we have a project in WordPress. This is what I exactly looking for. Thanks. :) Gotta try this. :)
Well done and Brilliant!!! Thanks for sharing, save me a lot of time! I would suggest let div control the color of the icon and text incase you change through the customize feature.
Your videos are absolutely on point! Subscribed can't wait to keep watching.
Thanks Stephen! Much appreciated. I have some cool stuff in the works and a new tutorial dropping TODAY so I'll try and keep them coming :)
Great job as always Josh. All your videos are so much helpful.
Just found you Happy I did, great tutorial! PROBLEM though- I can't get the social media icons to stay to the right-- after I change the css, Do I have to add the code to the style sheet for it to stick?? (where is this style sheet stored?)
Awesome video! What if I want to make the top contact menu as you have but with a slide-in primary menu using the theme customizer? I set it to secondary and it the contact details go below the menu items in the slide-in menu
Thanks, Josh. This is what I needed.
Amazing tut, Josh. Just found you here and subscribed
Great tutorial. But you could face an issue while scrolling down (your hover color could come back to it default color). In that case don't just forget the ''Important!'' after color.
Josh you are awesome Man, keep posting like this. It really helps.
Hey Josh! I tried it step by step and its working fine. First of all thanks for this video. I have two questions, 1. How can I move the email, phone number and social icons to complete right side? 2. How to add and customize phone number email social icons to the primary menu bar? Is the process the same?
Best tutorial i have ever seen. Much love
When I go to Customize it shows Header and Navigation for a split second and then it disappears. This is with Divi installed. Any idea how to get to it? I am trying to make a few of the secondary menu links into buttons. This video is amazing BTW!
Very well done and very helpful. Thank you!
This is great if I could get it to work... when I add the secondary menu, it is under the main nav menu and is in a list?? I want to have it just like you have it up top in the color bar.
ok I fixed this if anyone else has this issue it is in the customizer, header-navigation, secondary menu bar, then clicked the make FULL WIDTH. After I added your code and made the new menu, I went back and clicked off full width. Not sure why this worked but it did.
Hey Josh. Love your sites. Are you using a full width menu and adding the logo on there? My logos aren't showing up so big on my sites. Thanks.
Thank you! Yeah I generally use fullwidth menu, do some logo adjustments in the theme customizer then add CSS if needed.
Need this right now, but am totally stymied because I cant find where or how to Open The Style Sheet that you are using. Where is it??? I cant find how to get to it, or save any changes made to inspect element bits.
Hi Josh, amaaaaaazing tutorials. Thank you so much. Do you actually know the css snippet to change the link color and hover color in the submenu of the FIXED (STICKY) header. I am not able to change it somehow.... All help would be highly apreciated :) Greetings from Germany!
Do you have any videos on building a custom header using the Theme Builder?
Not yet. I haven't used the Theme Builder much myself to this point. But that's the plan for the near future so keep an eye out! And if you want to sign up for my mailing list, you'll know as soon as the next tutorial drops: joshhall.co
Hey Josh, for some reason on my end the "select a menu to edit" option is not appearing. Does it have something to do with a specific theme? What could you recommend to make sure the menu to edit option would appear? Currently, I see it says your theme supports 3 menus, maybe that's why it's not appearing on my end? Thank you!
Yeah this is specific to Divi :)
Too many booms, Josh. Lol... Love your tutorials.
haha I mentioned that in the tutorial I posted today :) I'll try to stop but no promises!
You nailed it Josh, thumbs up.
ha thanks, Yildiz! Happy to help. This is a big one for me as I use it in almost all of my builds.
Another great tutorial Josh. Thanks. 🔥🔥🔥
Great tutorial. Thank you, Josh. I'm curious how I would separate two items in the top header so that one is flush with the right side of the page and the other is flush with the left side of the page?
Thanks Stephanie! Haven't done that but I think probably have to do some custom CSS work to separate 2 elements. It would probably require adding in a custom divi into the header.php and styling that separately.
Hmm. Do you know of any tutorials that explain how to do this? I see it all the time on websites. I feel like it should be pretty straight forward but that's often not the case with web development :-)
Not sure Steph - haven't seen any that go over that exactly. You're welcome to post the question in my Divi group if you'd like! Someone may have done that before or you'd most likely get some code. If you're not already a member, feel free to join here! facebook.com/groups/diviwebdesigners/
I want to turn that Secondary Menu Off for the Mobile Menu? You mentioned it? How is it done?
I wonder how you sized your logo. I am struggling on Divi to make the logo right size. It either makes the prime menu bar bigger not just the logo :/
I do it with custom CSS. I'll generally do some basic settings in the Theme Customizer then edit it further with some CSS magic :)
Great vid, thank you. However, I still cannot find where to access those social links in the top header so that I can add another. All you showed was copying and paying the code but did not show where I can find this within WP admin. Can you please explain where to access this top header where the socials are? They are not in the secondary menu links where you were adding the phone number, etc.
Hi..Thanks for this lovely and helpful video..
Question: in the secondary menu bar, the phone number and email icons, actually take the user to dial the number or to their inbox as a link, how can we add that same kind of link back in the custom links?
Will appreciate your guidance!! Thanks !!
Hi Josh. I used CSS code to hide the top header but the problem is when the page load slowly, it's still show the top header a bit until it's finished. How can fix it ?. Thanks.
This is the first of your videos I've seen - amazing! Loved how were able to rearrange the social media icons so effectively using a bit of CSS.
Also, cool name by the way lol
How can you make the secondary menu items show up at the top of the mobile menu items instead of the bottom?
Hi, Josh. Superb tutorial. Wonderful clean look for this header. I am using this for the second time--for a new client's website. As before, it looks great on desktop; however, the menu is absent again on mobile. Do you know what I might be doing wrong? many thanks.
Thanks Dave. You're not doing anything wrong, the top menu goes into the main menu on mobile. Unfortunately you'd have to do some custom code to find a work around for that unless you use a 3rd party plugin to customize it.
@@JoshHallco I appreciate the replay, Josh. I'm not an expert coder. Any tips?
Really great tutorial, thank you Josh .
Great tutorial very helpful!
Hello Josh, sorry if this question was asked but how can you make that phone number tap to dial? I don't see a way to put the code in to do that. Is there a way to do it?
Hey Roger, in the link you can put tel: in front of the number which will make it trigger as a phone number link on mobile!
Sorry i am newbie. how to get style sheet. how can i start from their and make code. can i make code to the bottom of style sheet?
is there a way to move the logo to the right side?
I love your tutorials. Would you be able to let me know why the icons break if I use the css you mentioned above in a Divi child theme?? The icons turn into weird characters.
Thanks! It's probably a width issue. Check out my revised method of putting icons in here in this post! joshhall.co/how-to-add-icons-to-your-divi-menu/ You can actually do it now without setting the width which should help keep those icons from breaking. Other than that, it should work fine child theme or not!
Josh Hall thanks a million Josh!
How relevant is this tutorial today? New to this trying to build a site, current theme is Divi
Hi Josh, just want to ask where can I find the styles sheet, so i can paste the css codes?
I need help please!
header option Is not showing up in customizer. instantly disappears and I can't click it fast enough
this video is from 2017 but it's very useful and just so that I ask :
I have hared a lot of comparisons about Divi and extra for blogging but I prefer Divi over extra thanks to the tremendous amount of plugins for it but one thing I like about extra in particular is the secondary menu trending posts and hamburger menu options. is there any way to add that manually to Divi, instead of showing contact info?
there isn't that much talk about the top header bar so thanks for this one
Hello Josh!
Thanks for sharing. Can I add custom fonts (not google fonts) in DIVI theme?
Yeah check this out: divi.space/divi-tutorials/how-to-add-custom-fonts-to-your-divi-website/
I'll second Yidiz's comment Josh, yet another great job, well done matey! :)
Nice work. Good tutorial. Presented well. Good pacing. Subscribed.
Thanks, Craig! Appreciate that feedback very much.
Awesome Tutorial!!! Thanks Josh!!!
Hi, What if I dont have cataloge Divi child in themes after I logged via FTP to my serwer? I have got only Divi.
Hi Josh, I have the custom CSS in my Divi child theme and referenced it in the Secondary Menu, as it is in the tutorial but the icons are still not showing.
Just purchased Divi yesterday. Does that make me a Dividian? Great tutorial. Had to sub :-)
Absolutely! Welcome to the best theme and community online :) If you'd like to join my FB group, here's the link: facebook.com/groups/diviwebdesigners/ Best community online and tons of free support. Just mention I gave you the link to join if you request.
Hi Josh Thanks for your great CSS tips...I have been trying this one and am getting an Inline-Block error that says I cannot use a "float" with it. What am I doing wrong?
Same here. New at this so am really lost.
Ahhh! Found it in a comment on his website. Comments under the tutorial
joshhall.co/how-to-customize-the-top-header-in-divi/
the “display: inline-block;” shouldn’t be brought over. should be only: #top-header .et-social-icons { float: right; }
Tevya on October 24, 2017 at 6:16 pm
Thanks for this! Very helpful. A great tutorial I’m sure I’ll refer to many times when people ask about this.
One little caveat: when overriding styles, best practice is to only include those styles that you changed. So in your very first example, the “display: inline-block;” shouldn’t be brought over. Just the float that was actually changed. So, it should be only: #top-header .et-social-icons { float: right; }
That makes things cleaner and if you’re editing stuff later, and won’t potentially override something else and create confusion.
See Ed's comment! Thanks for the feedback.
Awesome thankyou! Whats a "style sheet' :)
Great tutorial Josh! How to hide that secondary menu only, while scrolling down?
Fantastic tutorial. Thanks =)
Great tutorial but when I enter the Menus under the apperance there's no option for the secondary menu? any ideas why this would happen?
You need to create a top menu then make sure it's selected as the secondary menu then you're all set.
Was following but lost you on "I am going to bounce over to my style sheet" ... couldn't see how you bounced to that ..
Im lost at this exact point too. SOOOO FRUSTRATED!
This works well for desktop views, but on mobile the top bar is not visible and the secondary menu items get added to the primary drop down menu. The icons and their .before really makes a mess in that situation. I'm not seeing an option in the theme customizer to keep the top bar visible on mobile. What is necessary to make the top bar stay visible ?
Yeah the top menu displays in the menu with Divi unless you do some custom code. Unfortunately unless you're using a plugin custom CSS is the way to go here.
@@JoshHallco Thanks. Informative video. I notice that (of course) the nice sites you showed avoids this issue, mostly by having the topbar stay visible and adapting to the size. Not a simple thing to do.
how do I change the background colour of the top header?
Kim you can do that in the Theme Customizer under secondary menu options or use CSS and target it with #top-header
Amazing! Learnt a lot just now.
Hi Josh, where i can find this custom style sheet in divi theme ?
Here ya go: joshhall.co/where-to-put-your-custom-css-in-divi/
Hi Josh thanks for a great video. Is there a way of adding other social media icons to the primary menu bar? I'm looking at adding Instagram to the primary menu.
Best way to do that (without a bunch of coding) is divi.space/product/divi-icon-party/ref/8878/?campaign=DiviIconParty
Excellent tutorial, thank you 🤗
OK... as of yesterday I switched from (MT) Media Temple and Elementor to SiteGround and DIVI. I made my website and installed Let'S Encrypt all cool stuff and blindingly fast compared to (MT). SO here's the question "I'm no geek so custom CSS is out of my comfort zone BUT really important. Found your post by TH-cam margin ad and it's really interesting stuff. Love the Search and improve approach. Where do I start if I want to follow your tuts on DIVI Custom CSS styling as I haven't yet found this type of tutorial /info around... Great stuff Subscribed and Liked!
Thank, Paul! I responded to another comment but I'll be coming out with a CSS course next year. You can check out the other links I mentioned to hopefully get you going for now!
Josh. I was finally able to setup everthing as your instructed in your Css video. I'm using PC. I make my changes, save them adn then when i purge and refresh, it reverts back to the original (in particular, trying to move the social icons to the right). When i open up the CSS file, the chagnes are there but not reflected ont he website.
Josh Hall Thanks. Im on Siteground. Your instructions are spot on, I reckon its just slow updating. Do you recommend caching everytime i save my style css?
Yep, unfortunately you have to clear that every time you make a css change. The cache helps with faster load times but it is a pain sometimes when making CSS changes.
Josh Hall Im being indoctrinated by cache fire, lol. I spent easy 30 minites changing text color and font size, finally gave up and decided to come yo work. 15 mins later, pulling into wk parking lot, checked the site on my phone...and THE CHANGES TOOK! smh lol
oh man.. you are doing great job..thank you for baby steps tutorial ;)
No problem!
How much it cost to build me one
i am using divi also. but the quote said " float can't be use with display inline-blcok what is the problem here
Thank you! This helped a lot, I appreciate the effort that you put into it. :)
Thanks, Jennifer! Really appreciate that feedback and so glad it helped!
Thanks Josh a lot for this tutorial. However when i change the float to the right for the social icons, it says float can't be used with display: inline-block :( why it did not work? Thanks for your come back ;)
mmm not sure Nicolas. The code in my tutorial still works for me....
When overriding styles, you should only include the styles you changed. The line “display: inline-block;” shouldn’t have been brought over, just the float that was actually changed. Just bring over: #top-header .et-social-icons { float: right; } and you should be OK.
Hi Josh,
Thanks for this video. It is very useful. Just one question if I want to add Text Us link to the top menu the "Custom Menu" is not accepting this code "sms:777-777-7777". What should I do instead?
Any solutions?
I'm actually not sure on text. Maybe someone who sees this who knows can chime in. I would think that would work as well but I've had issues trying to make a text link as well.
can you tell me how open customize theme header after copy the social icone code
Hi Josh. Question - When updating Divi will I lose all the CSS you taught. ? :-(
As long as the CSS isn't in the main Divi theme stylesheet, you're all set. That's why I always recommend putting custom CSS in a child theme stylesheet. Even if the code is in the various CSS options in Divi, you're all set too. I have a tutorial in the works on all that!
Ok... I realized it doesn't work when i paste the code inside my child theme editor.
But does work when I paste it inside the Divi's Custom CSS editor, which I know is not a best practice. Any help please?
Should work as long as browser is refreshed and site is cached!
Hi, Josh, and everyone,
has anyone else had a problem with the code translating to mobile devices? For me, there is nothing showing...Thanks in advance for any help. :)
The top menu actually goes into the pull down menu with Divi on mobile. Would take some custom code to rearrange that for mobile.
super helpful thanks a lot
Thank you this was very helpful
How to add youtube? with icon?
How do I pull up the Style Sheet window, I'm on a mac
Here ya go: joshhall.co/where-to-put-your-custom-css-in-divi/
Thank you for the tutorial. It helped a lot. I am trying to add an email address at the top, how do I link it? Thanks again :-)
hi why don't i see that secondary menu at 2:29, do i have to do something else before I can see that option?
Ah yep you just need to create a new menu for the top header then you can adjust accordingly!
thank you so much! i actually figured it out. i didn't know the secondary menu check box was for that top header, never touched it til today. love your tutorials!
Sir there is one problem in divi text module .Most of the time ,Divi Text Module loses formatting.How can we solve this issue?
Yeah that's a pain. Luckily there is a free solution. I use this on every site. Should help: wordpress.org/plugins/tinymce-advanced/
Hey Josh I really like all your divi tutorial but when I'm working on a website from the inspect element it's fine, but when i copy the code on my custom css, it does not take any effect i don't know who you do your.
Hi Emmanel, I’m actually putting a tutorial together on that soon but in short, I connect through FTP right to my stylesheet then open it up in my text editor. I use TextMate2 as my text editor and use Transmit for Mac to connect through FTP. Let me know if that helps for now!
Now I'm waiting with bated breathe for this one...Been thinking of doing this myself, not sure how it would work...I love WordPress, but the editor is crap.
It'll be coming soon!
I'm also curious about this. How are you accessing the stylesheet if it's in the database? Would love to know how you set up your stylesheet so that you can access it directly via FTP, this would be a huge timesaver.
Emmanel, here you go! joshhall.co/where-to-put-your-custom-css-in-divi/
how to add custom text at top bar?
How to add to Top Header TH-cam ikon ?
Going to put a tutorial together on that but this should help for now! divi.space/divi-tutorials/how-to-extend-the-divi-social-media-icons-using-font-awesome/
how you my style sheet where we paste this code
Divi > Theme Options > General Tab > Custom CSS (at the bottom)
Is the browser that you are using Chrome? I was wondering how you got the mobile devices
Yep Chrome and Inspect Element!
Josh Hall thank you!
Wow thanks for sharing!
No problem. Thanks, Andrew!
Andrew Lockie q
A
A
A