Display and Modify CSS variable ? (Module) 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.
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!)