Jump to content

Customizing navigation menu Joomla 3.x


brainiac080195

Recommended Posts

I want to customize some parts of navigation bar.
I have tried everything on my side but wasn't able to change it.
Here is the css file:
Here is the ziped plugin from web site that influences the menu:
Here is the web adress of site:
Here is the current menu look:
Screenshot_17.jpg
Here is what I would like it to look like:
Screenshot_16.jpg
So as you can see from pictures and live web site when a block in first dropdown menu has another submenu, the blook gets really bigger. The other thing is the position of second dropdown menu (second submenu). I wasn't able to position it as show on the second image.
Please, help. If you have any ideas. If you need anymore files or explanations don't hesitate.
Thank you.
Link to comment
Share on other sites

.pull {display: none;} /* don't know what this is used for?*/.st-menu ul ul li a, .st-menu ul ul li .separator { /* parent menu element padding/margin applied to submenus elements so set these to 0*/    margin: 0;    padding: 0;}ul.st-main-menu ul ul {    left: 0px;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;}ul.st-main-menu ul li:hover ul {    left: 196px;}
  • Like 1
Link to comment
Share on other sites

.pull {display: none;} /* don't know what this is used for?*/.st-menu ul ul li a, .st-menu ul ul li .separator { /* parent menu element padding/margin applied to submenus elements so set these to 0*/    margin: 0;    padding: 0;}ul.st-main-menu ul ul {    left: 0px;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;}ul.st-main-menu ul li:hover ul {    left: 196px;}

 

 

Thanks works perfectly on Chrome but i IE 11 the ' ul.st-main-menu ul ul ' are showing even without hover. I tried 'overflow: hidden' but it didn't work in my case. Any idea?

Edited by brainiac080195
Link to comment
Share on other sites

Seems to be working in IE11 for me.?

 

Maybe you haven't spotted the difference as you are not used to Cyrillic. I checked it on 2 more computers and same results. second sub menu is over the first sub menu and it isn't hidden even when you not hover over first <li>

 

Screenshot_19.jpg

Link to comment
Share on other sites

OK! cr@ppy IE does it again! PLEASE MS, GIVE UP! ON browsers, you just haven't got a clue, 7 to 10 years to catch up to better browsers, and you still fail.

 

try

ul.st-main-menu ul ul {    left: 0;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 202px;	visibility: visible;}

normally i would use left: -9999em; or display: none; but because this would interfere with transition animation, we have to use visibility instead.

 

EDIT:i think the submenu acts more smoothly using

ul.st-main-menu ul ul {    left: 75%;    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 100%;	visibility: visible;}

IN IE

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

OK! cr@ppy IE does it again! PLEASE MS, GIVE UP! ON browsers, you just haven't got a clue, 7 to 10 years to catch up to better browsers, and you still fail.

 

try

ul.st-main-menu ul ul {    left: 0;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 202px;	visibility: visible;}

normally i would use left: -9999em; or display: none; but because this would interfere with transition animation, we have to use visibility instead.

 

EDIT:i think the submenu acts more smoothly using

ul.st-main-menu ul ul {    left: 75%;    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 100%;	visibility: visible;}

IN IE

 

Works on IE now and it is smother now on other browsers. IE is ######, I used overflow: hidden/visible and id didn't work, and then Microsoft asks why you don't like IE, THIS IS WHY. Always if IE do this......

 

Anyways thanks man, you are the only one who helped me, and i posted this problems on many forums. Thanks again problem solved.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...