Make a menu really responsive

Question

I have a menu with several Ivs in it with content, this site I am developing the client will have access to edit and delete elements you want from the site, so these items from within the menu need to always be in the middle, however I am not able to make jQuery manage it, for example, if there is a div only the css class should change, if there are two, it should be other properties, follow my current code:

 var numCells = $("div.secondMenuButtonsCell").length;
  alert(numCells);
  if(numCells == 1){
$(".secondMenuButtonsCell").css({
  "width": "50% !important",         
  "margin-right": "auto !important",
  "margin-left": "auto !important"
  "border-right":"1px solid #CCCCCC !important",
  "height": "71px !important",
  "padding": "14px !important",
  "display": "inline-grid !important"
         });
              $("a.btnContentRow").css({
             "display": "inline-block !important",
              "text-align": "left !important"
                    }); };

but this code is not changing the class, I did something wrong?

Answer 1

I’m not seeing code to change class in your script.

advise you to create a class in css for the specified style as for example:

 .meu-estilo1{
      width: 50% !important;         
      margin-right: auto !important;
      margin-left: auto !important;
      border-right:1px solid #CCCCCC !important;
      height: 71px !important;
      padding: 14px !important;
      display: inline-grid !important;
             }

to count the div will require a selector # or . accompanied by a name to capture in jquery.

example in HTML:

 <div class="teste"></div>

in jQuery you do the check as follows:

var $div = $('.teste');
var num_div = $div.size();

if (num_div == 1) {

   $div.removeClass('outras classes de estilo');
   $div.addClass('meu-estilo1');
}