Burger menu σε desktop version και πρόβλημα με το μενού.

[bananasplit]

Καλησπέρα ρε παιδιά! Πάει να με τρελάνει ένα burger menu που προσπαθώ να βάλω. Δε χρησιμοποιώ header, οπότε το menu μπαίνει κατευθείαν στο body. Το βάζω πάνω δεξιά, όπως ακριβώς ήθελα. Όταν ανοίξει, αντί να κεντραριστεί το overlay, επεκτείνει τη σελίδα δεξιά. (ΔΕ θέλω επέκταση ούτε προς τα δεξιά, ούτε προς τα κάτω). Όταν καταφέρω να φέρω το overlay εκεί που θέλω, χαλάει και το burger. δε μπορώ να καταλάβω τι κάνω λάθος. Κάπου έχω κολλήσει σε κάποιο κομμάτι του κώδικα, αλλά δε μπορώ να το βρώ. ΟΠΟΙΑΔΗΠΟΤΕ βοήθεια θα ήταν πολύ πολύ χρήσιμη. υ.γ. Χρησιμοποιώ το divi (άρα custom css) και ο κώδικας είναι ο παρακάτω. 

/*align the hamburger menu to the right*/
.pa-fullscreen-menu .et_pb_menu__wrap {
    justify-content: flex-end !important;
}

/*hide the desktop version of the menu*/
.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
    display: none !important;
}

/*show the mobile version of the menu on desktop*/
.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
    display: block !important;
    align-items: center !important;
}

/*style the opened menu*/
.pa-fullscreen-menu .opened #mobile_menu1 {
    width: calc(100vw - 40px) !important;  /* 20px margin on left and right */
    position: fixed !important;
    top: 20px !important;  /* 20px margin on top */
    left: 20px !important;  /* 20px margin on left */
    right: 20px !important;  /* 20px margin on right */
    bottom: 20px !important;  /* 20px margin on bottom */
    display: flex !important;
    justify-content: center !important;
    flex-direction: column !important;
    opacity: 0.95 !important;
    visibility: visible !important;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    padding: 0 !important;
    box-sizing: border-box;  /* Ensure padding and border are included in the element's total width and height */
    z-index: 99999 !important;  /* Ensure it is above other elements */
    background-color: red !important; /* Make the overlay red */
}

/*style the closed menu*/
.pa-fullscreen-menu .closed #mobile_menu1 {
    background-color: #fff !important;
    text-align: center !important;
    width: calc(100vw - 40px) !important;  /* 20px margin on left and right */
    position: fixed !important;  /* Use fixed positioning */
    top: 20px !important;  /* 20px margin on top */
    left: 20px !important;  /* 20px margin on left */
    right: 20px !important;  /* 20px margin on right */
    bottom: 20px !important;  /* 20px margin on bottom */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
    opacity: 0 !important;
    visibility: hidden !important;
    box-sizing: border-box;  /* Ensure padding and border are included in the element's total width and height */
    z-index: 99999 !important;  /* Ensure it is above other elements */
}

/*remove the bullet points from the list items*/
.pa-fullscreen-menu #mobile_menu1 li {
    list-style: none !important;
    text-align: center !important;
    width: 100%;
}

/*move the menu to the top above other elements*/
.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
    z-index: 999999 !important;
}

/*change the opened menu icon*/
.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
    content: "\4d" !important;
}

/*make the hamburger menu fixed position on mobile*/
.pa-fullscreen-menu .opened .mobile_menu_bar {
    position: fixed !important;
}

/*remove the default blue border top on the mobile menu*/
.pa-fullscreen-menu .et_mobile_menu {
    border-top: none;
}

/*remove the default background color on menu items*/
.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
    background-color: transparent;
}

/*remove the default hover background color and adjust opacity*/
.et_mobile_menu li a:hover {
    background-color: transparent;
    opacity: 1;
}

/*remove the default border bottom on menu items*/
.pa-fullscreen-menu .et_mobile_menu li a {
    border-bottom: none;
}

/* Prevent body from scrolling when menu is open */
.pa-fullscreen-menu .opened body {
    overflow: hidden !important;
}

/* Change the color of the burger menu icon when the menu is opened */
.pa-fullscreen-menu .opened .mobile_menu_bar {
    color: white !important; /* Change to white */
}

/* Optional: Change the color of the icon's before/after pseudo-elements */
.pa-fullscreen-menu .opened .mobile_menu_bar:before,
.pa-fullscreen-menu .opened .mobile_menu_bar:after {
    background-color: white !important; /* Change to white */
}

/* Style for the burger menu icon and close icon */
.pa-fullscreen-menu .mobile_menu_bar,
.pa-fullscreen-menu .close_menu_bar {
    position: relative !important;
    top:-40vh;  /* Lowered to 20vh */
    left: 0vw;
    width: 50px;
    height: 50px;
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000010;  /* Ensure they are above the overlay */
    cursor: pointer;
}

/* Specific style for close icon */
.pa-fullscreen-menu .close_menu_bar {
    display: none;  /* Initially hidden */
}

/* Show close icon when menu is opened */
.pa-fullscreen-menu .opened .close_menu_bar {
    display: flex !important;
}

 

[XPHSTOS_]

Φτιαξε ένα  demo στο codepen ή κάποιο αντίστοιχο γιατί έτσι άκρη δεν θα βγάλουμε.

Μέγα "red φλάκ" - που λέει και μια ψυχή - τα τόσα !important;

[bananasplit]

ισχύει οτι τα !important δεν τα χωνεύω καθόλου. Απλά, προσπαθώ να παρακάμψω τον κώδικα του divi theme. βάζει πχ κάτι elements που πιάνουν μισή οθόνη. ή αντί για τη css που βάζεις εσύ, δίνει προτεραιότητα στη δική του. θα φτιάξω ένα demo, κι ίσως έτσι το λύσω κιόλας! Ευχαριστώ!!

[greekfragma]

το divi δεν ειναι για καστομιές.

το πρόβλημα είναι και σε desktop και σε mobile?

αν είναι μόνο σε mobile κοίτα και τα αντίστοιχα εργαλεία για mobile responsiveness

[bananasplit]

αυτό βλέπω, δεν του αρέσουν οι καστομιές.. (σε αντίθεση με εμένα!). από την άλλη, ο break είναι πανάκριβος, και ο elementor ψιλοβαρετός για αυτά που δίνει.