General Discussion

Topic for general discussion regarding the Nop Urban Responsive Theme.

How can I make the categories always shown as  items in the top level of the menu?

Hi, 

You can show the Categories as top menu items by unchecking this setting in the administration of the Mega Menu plugin: Show categories in a single menu.

Make sure that you have main categories marked as shown in top menu.

Hi,

I have many categories so I need a little room in the header menu to show all categories in one line. I have made the following modification but the only problem is that now when I reduce the size of the browser the categories will overlap the logo and the header buttons. Below is the css I changed in the Custom Head Styles box in theme settings. Sorry I am not a pro in CSS so correct if any change is required.

@media (min-width: 1001px){
.header-top-strip .header-menu {
    max-width: 1050px;
}}




@media (min-width: 1001px){
.header.normal .header-menu {
    max-width: none;
    margin: 0px;
}}
@media (min-width: 1001px){
.header-top-strip {
    max-width: none;
    margin: 0px;
}}

Hello,

You have removed the header-menu max-width property, and that is why your menu overlaps the logo and header buttons, since they are absolute positioned. To limit it try giving it max-width: 80%; this will limit the menu, and it will clear the two elements. If your logo is wider you can try reducing the percentage value.

Yes I did this so that all my categories are shown in one single line is there a way to move the logo and links out of the header menu so that the header menu is only used for categories.

Hello,

You can try adding this custom css code:

@media (min-width: 1001px){

.header.normal .header-top-strip {
  height: auto;
}
.header.normal .header-logo {
  position: static;
  float: left;
}
.header.normal .header-top-strip > ul {
  position: static;
  float: right;
}
.header.normal .header-menu {
  display: block;
  clear: both;
  padding: 10px 0 0;
  text-align: center;
}
.header.normal .mega-menu {
  display: inline-block
}
.header.normal .mega-menu>li {
  float: none;
  font-size: 0;
}

}

p.s. If you decide to use that layout you could remove the max-width: 80% you have set to the menu. It will clear the logo and buttons so you will not need it. 

Well that has completely solved the problem only one small glitch that the mega menu is going out of the page, please guide me how to fix that. Also the category names are too long so the subcategory name text is cutting off by the grey boxes in the menus instead the text should wrap around if it is too long.

Hello,

We can provide you with a css code to fix the problem, but it will be better if you send us a link to your website if possible(you can send it to a personal message if your website is not published). This way we will be able to provide you with the most suitable solution. 

PMed