Close

General Discussion

Support
8 years ago
#9123 Quote
Avatar
  • Moderator
  • 1044
Topic for general discussion regarding the Nop Urban Responsive Theme.
infiniti
8 years ago
#10216 Quote
Avatar
  • 10
How can I make the categories always shown as  items in the top level of the menu?
Deni
8 years ago
#10217 Quote
Avatar
  • Moderator
  • 389
infiniti wrote:
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.
Best Regards,
Mladen Staykov
Nop-Templates.com
infiniti
8 years ago
#10223 Quote
Avatar
  • 10
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;
}}
nikola.dragiev
8 years ago
#10228 Quote
Avatar
  • Moderator
  • 154
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.
Best regards,
Nikola Dragiev
Nop-Templates.com
infiniti
8 years ago
#10232 Quote
Avatar
  • 10
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.
nikola.dragiev
8 years ago
#10238 Quote
Avatar
  • Moderator
  • 154
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. 
Best regards,
Nikola Dragiev
Nop-Templates.com
infiniti
8 years ago
#10239 Quote
Avatar
  • 10
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.
nikola.dragiev
8 years ago
#10243 Quote
Avatar
  • Moderator
  • 154
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. 
Best regards,
Nikola Dragiev
Nop-Templates.com
infiniti
8 years ago
#10247 Quote
Avatar
  • 10
PMed