Joomla Templates Club 406,261 posts

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#199862

Why is my menu dropping down under the other items?

http://goo.gl/7ZniqQ

---

Attachments:

1. 

[icandy_webs Friend icandy_websJoin date: February 2014Posts: 82Downloads:1Uploads:8 Thanks: 11 Thanked: 12 times in 1 posts]

#543034

Hi @angie00,

The reason you are encountering this issue is because you have more of menu items than the template was initially designed to hold. You may have to consider condensing your navigation, decreasing the size of the font a bit to fit more menu items, or widening the width of the template itself to adjust for a longer menu.

To widen the width of the template, you can log into the backend > Template Manager > Choose Sugite Template > Theme Magic > Grid > adjust the width accordingly to better fit your needs. I would advise saving a copy of this instead of overriding the default themes and only make modifications to your copy.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#543063

Hi angie00,

You can adjust the main menu as follows:

1. Open the http://wpsd.net/university/templates/ja_sugite/css/custom.css file and remove this rule:

.navbar-default .navbar-nav > li {
margin-left: 4px !important;
margin-right: 4px !important;
}

.head-right + .t3-mainnav {
position: absolute;
right: 0;
}

2. Find this declaration and remove the margin-left property:

.navbar-nav {
float: none;
margin-left: 5% !important;
}

3. Last step is to add this declaration to the custom.css file:

.head-right + .t3-mainnav {
padding: 0;
}

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#543366

When I did as you suggested the menu is now behind the logo….

---

Attachments:

1. 

[icandy_webs Friend icandy_websJoin date: February 2014Posts: 82Downloads:1Uploads:8 Thanks: 11 Thanked: 12 times in 1 posts]

#543382

Hi @angie00,

You could try this:

.t3-megamenu .nav .navbar-nav {
margin-left: 205px;
width: 840px;
}

The problem that you are going to run into with the styles above is depending on your site visitors device or as they make the browser smaller, your menu will not show links that are further to the right, so you’re probably better off changing the grid size so that the menu will hide itself once a certain pixel width has been reached as I had said in the initial post.

Also I measured the width of your current nav and it spans about 830px so I set it to 840px to give you a little wiggle room.

Also I am not sure if you have tested this out yet but your main navigation disappears once the width reaches a certain breakpoint which may cause some usability issues for your visitors. I looked to see if you put it in the offcanvas position but it doesn’t show up. Just figured I’d give you a heads up.

1 user says Thank You to icandy_webs for this useful post

1. angie00

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#543690

@icandy_webs
Would it be possible to create a button like my search button on the site for a contact button next to it? Is that hard to do? Maybe if I could change that it might give me more room as well.

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#543693

I kinda got something showing there using the nav-pill code and putting it in the language-switcher position, but it looks out of place. I tried adjusting margins/ padding using firebug but it adjusts all 3 icons at the same time so I’m kinda stuck. :(( Can anyone maybe help us with this?

[icandy_webs Friend icandy_websJoin date: February 2014Posts: 82Downloads:1Uploads:8 Thanks: 11 Thanked: 12 times in 1 posts]

#543698

hi @angie00,

try this to target the icon


.languageswitcherload .custom {
position: relative;
top: 19px;
}


2 users say Thank You to icandy_webs for this useful post

1. angie00
2. Adam M

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#543824

Much, much appreciate your generous help! That worked perfectly!

[Author]

Posts