Improvements in the Responsive MENU

Scriptcase 9 Suggestions
#1

Hi everyone,

I’d like to share a suggestion for improving the Responsive MENU functionality.

Currently, if someone wants to make CSS changes to the menu, the only way to do it is by manually editing the code directly in app → index.php. Every time I need to make styling adjustments, I have to go into the index.php file and modify the CSS code manually since there’s no other way to access it.

It would be much more convenient if there was a separate CSS file for the menu styling. This way, at least I could make changes through copy-paste operations instead of having to locate and edit the exact code within the PHP file every time.

What are your thoughts on this improvement?

#2

@Markos_5489,

When you talk about adjusting the menu’s CSS style, are you referring to colors, item fonts, etc.? Or are you referring to other specific things?

Because if you’re talking about colors and fonts, these are features that are already present natively and can be changed in the interface, such as responsive menu themes in “Layout → Responsive Menu Themes.”

If not, please specify exactly what these CSS styles are that we don’t currently have natively.

Best regards!

#3

Hi, I am not referring to colors - these kinds of things can be done as you said from “Layout → Responsive Menu Themes.”
I am talking about padding, box-shadow, margins, font-size, etc. All these things can only be accessed from the index.php of the responsive menu.

For example if i want to change the font-size and remove the box shadow i will have to edit the class

.ae-menubar-accordion > [role=menubar] [role=menuitem]
position: relative;
padding: 0.5em;
color: var(–theme-menubar-nav-menuitem-color);
font-size: 0.875rem;
font-weight: 400;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
column-gap: 0.5em;
row-gap: 0;
flex-grow: 0;
flex-shrink: 0;
display: flex;
cursor: pointer;

.ae-menubar[aria-orientation=vertical] {
position: fixed;
top: 0;
left: 0;
padding: 16px;
padding-right: 0;
width: 260px;
height: 100vh;
box-shadow: 2px 0 6px var(–theme-menubar-global-boxShadowColor);
transition: width 150ms ease-out;
flex-flow: column nowrap;
row-gap: 2rem;
overflow: hidden;
z-index: 1001;

The frustrating thing is that I will have to manually edit the index.php CSS code every time I make one simple change to the responsive menu app, because it overwrites it.

#4

Thank you for your feedback with all these details.

We will report this as an improvement suggestion to the appropriate team.

Once this improvement is implemented and released, we will provide feedback through this thread.

Best regards!

#5

Hi scriptcase, I know that this improvement will take time.
Maybe you can seperate the css out the index.php file of the responsive menu so we can copy paste our css manually again to the folder of the app… this would take 1 minute if so.
The index.php will read this <link rel="stylesheet" href="mystyle.css"> but we will overwrite it with our css

#6

to customize the menu, you can override the default settings by adding a style section in the onApplincatioInit code.

e.g.:

?>
<style>
  .ae-menubar-accordion > [role=menubar] [role=menuitem]
font-size: 0.875 !important; 
</style>
<?php

note the “!important” keyword

#7

Thank you for the response,

I have tried it in the responsive menu on the onApplincatioInit and it worked.
You forgot the {}

?>
<style>
  .ae-menubar-accordion > [role=menubar] [role=menuitem] {
     font-size: 13px !important; 
  }
</style>
<?php

THANK YOU!

#8

That’s the way to go. I recently posted this. Custom responsive menu (vertical layout)

This is what my responsive menu currently looks like, with the changes made in onApplicationInit.

image
image1340×680 117 KB

1 Like
#9

Yes, you are right about the onApplicationInit, but if someone wants to change the width of the menu, I think it’s impossible unless you manually do it every time from the index.php.
The width is 260px by default; when I change this in the onApplicationInit, I have issues when it closes or when it opens again.

I saw JavaScript code written in the index.php that sets it to 260px when it’s open and 80px when it’s closed.

When i wrote this code it was everytime open or closed to 285px.

.ae-menubar[aria-orientation=vertical]{
width: 285px !important;
}

.ae-menubar[aria-orientation=vertical]{
width: 285px;
}

#10

If i want to change the logo of the responsive menu, from 48px !important as dedault, only manually i can do it to 70px for example ?