0

I'm developing a basic module that allows site admin to have the NavBar for mobile and Administration menu for the desktop view.

This can easily be done by adding this CSS.

#navbar-administration {
    display: none;
} 


@media only screen and (min-width: 0px) and (max-width: 959px) {

    #navbar-administration {
        display: block;
    }  /* show it on small screens */;
}

#admin-menu {
    display: block;
}

@media (max-width: 960px) {

    #admin-menu {
        display: none;
    }
}

I'm using hook_page_build() to display it on every page. Now I want user to be able to change on an administration page the 960 width which is the default line break to changes menu to their desired value.

My question how can I display the default variable value (960) on a text field and it can be modify the css once the number on the text field is been change.

1

You have many options:

  • Make a system settings form that stores the value to a drupal variable. Read that value from your (themes) css. Then when that form is submitted in your theme form submit handler have code clears the cache: cache_clear_all("{$theme}:css:*", NULL, TRUE);. Where $theme is your theme name. The CSS should be re-generated on page load.
  • I believe the LESS module allows you to easily make CSS variables applied to your files (in Less-3.x or greater for drupal). If you're not currently using LESS, then this is less helpful (pun NOT intended!)
-1

If you make the menu 100% wide inside the div and use jquery resize by dragging it should auto adjust the menu when dragged.

example of div resizing when dragged

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.