Short-Codes interactive Leiste
Tel:+41793677270
SMS:+41793440044
mailto:info@melowerbung.ch
WhatsUp:
https://api.whatsapp.com/send/?phone=+41793440044
Quelle WhatsUp:
https://stackoverflow.com/questions/64474212/whatsapp-link-by-using-a-shortcode
overlapping logo in menu bar
How to stop logo and menu shrink when scrolling
Primary Menu - Create a Call-to-Action Button
Hide Menu (make it invisible)
https://www.youtube.com/watch?v=0h4ahWFSKQ4
- In the Divi Editor open the relevant page
- In the right sidebar (Template Attributes/ Template/ „blank page“
Add Icons to Menu Bar
Call-to-Action Button in Second Menu bar
Change Menu Bar for various Devices (Also how to have menu bar below header image)
Different menu bars for different pages (sogenannte “conditional menus”)
https://www.youtube.com/watch?v=COScGwDG45o
(with plugin “conditional menus” / bei Problemen dazu “Max Mega Plugin” installieren, falls Pfeile nicht aufzeigten, regelt dieses Plugin das ohne dass es gebraucht wird.)
Different logos for different pages
- find page id
- upload the different logo in Divi Media
- Adjust the CSS and paste it into Divi/Theme Options / Allgemein /CSS
Create “Mega Menu” with Divi (wenn sehr viele pages)
Mehrsprachige Webseite (wie bei CatImpact) – Länder Icon im Menu
Plugin: Polylang
Change menu background color on scroll with divi theme
Hide navigation bar until scroll
Hide menu bar on a single Divi page
Achtung, im neuen Divi Builder:
In violetter Divi-Builder Leiste oben statt der 3 Punkte, das Settings-Rad klicken und dort unter advanced den CSS Code eingeben:
/* Hide the header */
#secondary-menu { display:none; }
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
#top-header {
display: none;
}
/* Adjust padding for transparent headers */
.et_transparent_nav #main-content .container {
padding-top: 58px !important;
}
Second Logo in Menu Bar (z.B. Tardis unten auf vertikalem Menu)
Siehe dieses Video ab Minute 5:
https://www.youtube.com/watch?v=9msxdZceiEg
Primary Menu, hatte 1. Logo
Secundary Menu (definieren separate) mit 2. Logo
Fix the navigation bar - when scrolling it disappears
Divi/Theme Options/General Settings/
Disable “fixed Navigation bar”
FOOTER menu oder info zentrieren
FOOTER dynamic copyright year
Beispiel Teresa Meyer
Footer Dynamic Year (ev. inkl. Firmenname)
https://www.youtube.com/watch?v=wgXnTfTIlaE
Code für Legal Page:
I <a href=„www.dent.webwing.info/impressum-und-datenschutz“>Impressum & Datenschutz</a>
I <a href=„www.mediapressassociation.com“>Design by Media Press Association</a>
Back to Top button - customize
Flavicon
Zeigt manchmal nicht in der Menu bar. Dann ist die Pixel Höhe nicht korrekt.
Pixel Höhe für Flavicon = 43px
Shrink Global Header on scroll
Transparent floating menu bar
Guide for Sidebars
How to create Search Results Page
TB - fixed hamburger icon & logo
Phone Menu - Black overlay background
Wie bei planet hair webseite auf handy.
Phone/Tablet à Menu Slide-in von links mit Hintergrund (Bild oder Farbe)
Source:
https://www.b3multimedia.ie/create-minimalistic-divi-mobile-menu/
BASIC CSS
#mobile_menu, .opened #mobile_menu {
position: fixed;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
max-height: 100%;
z-index: 10;
top: 0;
border: none;
overflow-y: auto;
max-width: 100%;
float: left;
transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
background-color: rgb(0, 139, 203);
background-size: cover;
background-repeat: no-repeat;
}
.opened #mobile_menu {
transform: none;
}
.opened #mobile_menu a {
transform: none;
opacity: 1;
}
.opened #mobile_menu .menu-item:nth-child(1) a, .closed #mobile_menu .menu-item:nth-last-child(1) a {
transition-delay: 100ms;
}
.opened #mobile_menu .menu-item:nth-child(2) a, .closed #mobile_menu .menu-item:nth-last-child(2) a {
transition-delay: 200ms;
}
.opened #mobile_menu .menu-item:nth-child(3) a, .closed #mobile_menu .menu-item:nth-last-child(3) a {
transition-delay: 300ms;
}
.opened #mobile_menu .menu-item:nth-child(4) a, .closed #mobile_menu .menu-item:nth-last-child(4) a {
transition-delay: 400ms;
}
.opened #mobile_menu .menu-item:nth-child(5) a, .closed #mobile_menu .menu-item:nth-last-child(5) a {
transition-delay: 500ms;
}
.opened #mobile_menu .menu-item:nth-child(6) a, .closed #mobile_menu .menu-item:nth-last-child(6) a {
transition-delay: 600ms;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
color: #fff;
transition: all ease-in-out 300ms;
}
.mobile_nav.closed .mobile_menu_bar:before {
transition: all ease-in-out 300ms;
}
SPEZIELLER EFFECT
/* Menu animations */
.closed #mobile_menu {
opacity: 0;
pointer-events: none;
transform: translatex(-100%);
width: 0px;
transition-delay: 600ms;
}
/* Link animations */
#mobile_menu a {
transform: translatex(-90px);
opacity: 0;
transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
text-align: left;
}
PREVENTING BODY FROM SCROLLING WHILE DIVI MENU IS OPEN
(Theme Integrations – body area)
<script>
document.querySelector(“.mobile_menu_bar_toggle”).addEventListener(‘click’, function() {
var body = document.querySelector(“body”);
body.classList.toggle(‘noscroll’);
});
</script>
Navigationshintergrund - andere Farbe/Page
Hamburger Menu schon auf Desktop
Divi/ ThemeOptions/ Allgemein / CSS:
@media (max-width: 1024px) { #et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}
}
Problem: Menu auf 2 Zeilen
Schmales, fixes Seitenmenu
Transparent vertical menu - CSS
/*TRANSPARENT VERTICAL MENU*/
@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
}
@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}
@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #000000;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}
Quelle:
Animated Navigation Header (Desktop/Phones)
Seitlich Pop-Out Media Buttons - ev. für Menu
https://elegantthemes.us7.list-manage.com/track/click?u=9ae7aa91c578052b052b864d6&id=d0261d4b69&e=a9246e3935
Mosaic Slider Menu (sehr speziell)
(Checken if Phones work)
Breadcrumbs Navigationspfad
FOR SEO important:Breadcrumbs combine with structured date and Toast SEO: