my join box shrunk..

Hi In my site in login page, somewhere something happened and now my join box shrunk..

any idea

http://www.clipular.com/c/5341491828883456.png?k=oIXJqe0XInzL67IUO5XDLbMiO1g

thanks for your help

The problem is with your menu block on your home page.

The menu buttons are wrapped in a div with the same class name used in the popup join form.

<div class="container">

Then your css for that div container sets the width of the div to 180px.  Since the popup join for uses a class with the same name 'container', the CSS for the menu that you added is being used by the join form.

You should add an additional class name to the aforementioned div so that you can target it specifically without affecting other areas of the site.  You will notice that on pages of your site other than your home page, the popup form appears normally.

Hi houstonlively,

thanks for suggestion.

Is there way, or file that i can upload from original boonex so to resolve this issue?

I have not done any modification myself except only done job of uploading biz 2 template and activating it.

i am not tech so not sure how to resolve what you suggested.

thanks

You were tech enough to put that menu in a block on your home page in the first place, so I'm not sure why you are not tech enough to follow my suggestion.  On the other hand, if that block was added by someone other than yourself, that's the person that should be fixing it.

hi 

thanks for suggestion.

After thinking what i added last, I figured out issue. I have added https://www.boonex.com/forums/topic/Many-Items-on-Navigation-Menu.htm

and this very thing made my join or login box shrunk.

Thanks for being there. I now removed this from home page and now join and login back to normal

thanks for help

de

Now that I know where you got that menu, I can show you the cause of the problem and the fix.

The code below uses a class name 'container'. You need to change that name in 3 places, then it will work without affecting your popup join form.  Where I have container highlighted in red below, if we change it to a name that is more unique, it is less likely that the name will be used elsewhere.  Instead of container, call it container_999  So just add _999 after each instance of container below, and it will work just fine.

<style>

@import url(http://fonts.googleapis.com/css?family=Imprima);
@import url(http://fonts.googleapis.com/css?family=Knewave);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(http://fonts.googleapis.com/css?family=Chewy);
@import url(http://fonts.googleapis.com/css?family=Courgette);

.text-center {
  text-align: center;
}

*, *:before, *:after {
  -webkit-border-sizing: border-box;
  -moz-border-sizing: border-box;
  border-sizing: border-box;
}

.container {
  width: 180px;
  margin: 10px auto;
}
.container > ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}



.title1 {
  font-family: 'Imprima';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.title2 {
  font-family: 'Knewave';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.title3 {
  font-family: 'Lobster';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.title4 {
  font-family: 'Righteous';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.title5 {
  font-family: 'Chewy';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.title6 {
  font-family: 'Courgette';
  font-weight: norma;
  font-size: 14px;
  text-align: center;
  line-height: 1.4;
  color: #2980B9;
}

.dropdown a {
  text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: white;
  background: #2980B9;
  -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
  background: #2c89c6;
}
.dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: #fff;
  top: 14px;
  right: 10px;
}
.dropdown .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
}
.dropdown .icon-arrow:before {
  content: 'BC';
}
.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown .dropdown-menu li {
  padding: 0;
}
.dropdown .dropdown-menu li a {
  display: block;
  color: #6f6f6f;
  background: #EEE;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
  background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.dropdown .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}
.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}
@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

    </style>

    <script>
  window.console = window.console || function(t) {};
</script>
 <div class="container">
 
  <ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title1">Social Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/groups/home/" class="title1">Groups</a></li>
        <li><a href="http://www.iranbiz.org/m/info/home/" class="title1">Articles</a></li>
        <li><a href="http://www.iranbiz.org/m/events/home/" class="title1">Events</a></li>
        <li><a href="http://www.iranbiz.org/blogs/home/" class="title1">Blogs</a></li>
        <li><a href="http://www.iranbiz.org/forum/" class="title1">Forum</a></li>
        <li><a href="http://www.iranbiz.org/m/poll/&action=poll_home" class="title1">Polls</a></li>
        <li><a href="http://www.iranbiz.org/m/chat/home/" class="title1">Chat</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title2">Fun Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/interested/home/" class="title2">Interested?</a></li>
        <li><a href="http://www.iranbiz.org/m/club/home/" class="title2">Clubs</a></li>
        <li><a href="http://www.iranbiz.org/m/joke/home/" class="title2">Joke</a></li>
        <li><a href="http://www.iranbiz.org/m/dictionary/home/" class="title2">Dictionary</a></li>
        <li><a href="http://www.iranbiz.org/m/games/home/" class="title2">Games</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title3">Media Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/videos/home/" class="title3">Video</a></li>
        <li><a href="http://www.iranbiz.org/m/aqb_music_portal/" class="title3">Music</a></li>
        <li><a href="http://www.iranbiz.org/m/photos/home/" class="title3">Photo</a></li>
        <li><a href="http://www.iranbiz.org/m/sounds/home/" class="title3">Sound</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title4">Admin Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/announcement/home/" class="title4">Announcement</a></li>
        <li><a href="http://www.iranbiz.org/m/ticker/home/" class="title4">Ticker Ads</a></li>
        <li><a href="http://www.iranbiz.org/m/banner/home/" class="title4">Advertise</a></li>
        <li><a href="http://www.iranbiz.org/m/news/index/" class="title4">News</a></li>
        <li><a href="http://www.iranbiz.org/contact.php" class="title4">Contact Us</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title5">Activity Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/teams/home/" class="title3">Sport</a></li>
        <li><a href="http://www.iranbiz.org/m/schools/home/" class="title3">School</a></li>
        <li><a href="http://www.iranbiz.org/m/fashion/home/" class="title3">Fashion</a></li>
        <li><a href="http://www.iranbiz.org/m/blogger/home/" class="title3">Art & Culture</a></li>
        <li><a href="http://www.iranbiz.org/m/sites/home/" class="title3">Websites</a></li>
        <li><a href="http://www.iranbiz.org/m/person/home/" class="title3">Celebrities</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown" class="title6">Listing Menu <i class="icon-arrow"></i></a>
      <ul class="dropdown-menu">
        <li><a href="http://www.iranbiz.org/m/listing/home/" class="title4">Directory</a></li>
        <li><a href="http://www.iranbiz.org/m/classified/home/" class="title4">Classified Ads</a></li>
        <li><a href="http://www.iranbiz.org/m/property/home/" class="title4">Real Estate</a></li>
        <li><a href="http://www.iranbiz.org/m/auto/home/" class="title4">Cars</a></li>
        <li><a href="http://www.iranbiz.org/m/jobs/home/" class="title4">Jobs</a></li>
        <li><a href="http://www.iranbiz.org/m/restaurant/home/" class="title4">Food</a></li>
        <li><a href="http://www.iranbiz.org/m/expert/home/" class="title4">Ask Experts</a></li>
        <li><a href="http://www.iranbiz.org/m/store/home/" class="title4">Store</a></li>
      </ul>
    </li>
  </ul>
 
</div>
      

    
        <script>
      var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown, 0);
dropdownArray.forEach(function (el) {
    var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow');
    button.onclick = function (event) {
        if (!menu.hasClass('show')) {
            menu.classList.add('show');
            menu.classList.remove('hide');
            arrow.classList.add('open');
            arrow.classList.remove('close');
            event.preventDefault();
        } else {
            menu.classList.remove('show');
            menu.classList.add('hide');
            arrow.classList.remove('open');
            arrow.classList.add('close');
            event.preventDefault();
        }
    };
});
Element.prototype.hasClass = function (className) {
    return this.className && new RegExp('(^|\s)' + className + '(\s|$)').test(this.className);
};
      //@ sourceURL=pen.js
    </script>

    
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>