Divi Theme Make Your Logo Span Both Primary And Secondary Menu Bars. We are going to be using the Divi theme to create some great effects in this series of videos. The Divi theme has some great modules and effects. With a little work you can achieve some great eye-catching effects to enhance the look and user experience of your website
Today we will be demonstrating how to move the logo so that it spans both primary and secondary menus on a Divi website.
For the build today, we are going to use a bit of CSS code to make the changes to the Divi logo. Don't let the CSS coding put you off, it is very easy, and any code I write today I will paste below the video for you to use as you wish. You are welcome to copy the code and paste it into your site. We will also be using CSS media queries in this video to ensure that the positioning of the logo will work on desktop, tablet and mobile devices. CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete it to return back to how the site was previously. So, follow along with the video and see how easy it is to a horizontal expanding module effect on hover with the Divi Theme.
For more information on the Divi theme, check out our Divi playlists below.
Divi 4 Playlist: [ Ссылка ]
Title Scroll Effect Video: [ Ссылка ]
Contact Form With File Upload Video: [ Ссылка ]
Youtube Video Background Video: [ Ссылка ]
Divi Supreme Modules Playlist: [ Ссылка ]
Divi Brain Free Plugin Playlist : [ Ссылка ]
Divi 4 Theme Create An Ecommerce Store In One Hour: [ Ссылка ]
How To Create A Global Footer Video: [ Ссылка ]
Try out the Divi theme: [ Ссылка ]
Divi Supreme Modules Plugin 10% Off: [ Ссылка ]
Divi Brain Addons Free Plugin: [ Ссылка ]
My Blog : [ Ссылка ]
---------- CSS CODE USED TODAY: ----------
/* Header logo position */
#et-info {
float:right;
padding:15px 0 20px;
}
#logo {
margin-top:-92px;
}
#top-header {
z-index:9000;
}
@media only screen and (max-width: 800px) {
#logo {
margin-top:-80px;
}
}
@media only screen and (max-width: 400px) {
#logo {
margin-top:0;
}
}
---------- CHAPTERS ----------
00:00 Intro
00:56 Open Theme Customizer
01:16 Inspect Elements
02:19 Float Contact Info Right
03:05 Reposition Divi Logo
05:27 Position Logo On Top Of Secondary Menu Bar
06:52 Check Responsive Positioning
07:42 Add Media Queries For Tablet And Mobile
10:00 Result
---------- RECOMMENDED PLAYLISTS ----------
Elementor Ecommerce Store: [ Ссылка ]
Divi Snippets: [ Ссылка ]
Divi 4 Ecommerce Store: [ Ссылка ]
Bootstrap 4 Basics: [ Ссылка ]
Elementor: [ Ссылка ]
WordPress Tips: [ Ссылка ]
---------- RECOMMENDED VIDEOS: ----------
Bootstrap 4 Complete One Page Scrolling Website Tutorial : [ Ссылка ]
Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: [ Ссылка ]
Bootstrap - How to edit a bootstrap template: [ Ссылка ]
Divi Add a live facebook feed to your divi or any wordpress website: [ Ссылка ]
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: [ Ссылка ]
Elementor Wordpress Builder How To Build A Parallax Section: [ Ссылка ]
---------- SOCIAL MEDIA ----------
Follow what I'm doing on:
Facebook: [ Ссылка ]
Twitter: [ Ссылка ]
Linkedin: [ Ссылка ]
Support the channel: [ Ссылка ]
Courses I teach: [ Ссылка ]
Subscribe: [ Ссылка ]
#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite
