Alignment of sub-menu with main menu and sub-menu line height

[NeilW]

Hi and thank you for a great add-on.

Apologies if this is something that I should work out for myself but I am new to bootstrap and suffering “css shell shock” at the moment in trying to tie everything together.

I am using the sm clean style with a fixed top menu that I want aligned to the right.

I have had to fix the height of the top menu to 59px to get it to sit within the height of my navbar but have two problems with the look that I have so far;

1. The sub-menus are aligning to the right (end) of the main menu text, but I need them to align to the left (start) of each menu item text. (as with your menus above).
They need to extend to the right but they are extending back to the left beyond the start of the menu item text.

What code would I need to edit to fix this?

2. Also in responsive view on a small screen and when the toggle menu is pressed, the menus appear over the top of the page content. I know this is standard and OK on desktops and maybe even some tablets, but for small devices like phones, I would like the sub-menus to “push down” the content below it so that the top of the page can still be viewed from immediately below the nav-bar. There is also some unwanted transparency between the menu items.

Could you please advise how I may be able to fix this? I guess it is a tweak of the z-index but just not quite sure where.

The page that I am testing this on is here: http://mybusiness-mylife.com/new-responsive-intro/ and it will demonstrate the above issues.

I am currently using a different responsive technique on my site that is too slow to load and wanting to convert to bootstrap, but you can see the effects that I want to gain here: http://mybusiness-mylife.com/

Just one other point quick question, I notice that the break-points on your style sheet are different to the standard bootstrap break points. Could you please explain the reason for this?

Would really appreciate your assistance.

Thank you.

[admin]

Hi, sorry for the late reply! I just didn’t have any chance to look at the forum last week or so (too much urgent work and also the holidays). As far as I can see, your page does not include the script any more so, unfortunately, I cannot test right now. But in general, if you are using Bootstrap, then it’s much better to use the Bootstrap add-on instead of a separate SmartMenus theme like “sm-clean”. Here is a demo for a fixed top navbar:

http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

It will make sure all Bootstrap navbars functionality works like normally (including the Bootstrap theme, breakpoints, etc.) and will save you a lot configuration efforts.

[NeilW]

OK, thank you.

I just needed to get further ahead with things over the past two weeks which is why I reverted to just the plain bootstrap menu, but I will look to incorporate SmartMenus again on the above basis.

I was later fiddling around with using just pure css for the menu at that previous link but the new dev area is now here http://mybusiness-mylife.com/bootstrap-fresh/

I have got over the problem with the toggle menu, but the sub menus are still right aligned to the main menu where, although I want the menu itself right aligned, I would still like the sub menus aligned with the beginning (left) edge of the main menu rather than the end (right) edge.

Is there still a way to fix this?

Thanks again.

[admin]

Yep, there is a pretty simple fix. The thing is when you add the “navbar-right” class to the root UL element, Bootstrap will automatically right align all sub menus (and the SmartMenus script respects all Bootstrap styles.) So to avoid the issue do not add that class but instead right align the main menu “manually”. For example, you can set an id “main-menu” to your root UL element:

<ul id="main-menu" class="nav navbar-nav">

and then use the following additional CSS:

#main-menu {
	float: right !important;
	margin-right: -15px;
}

Cheers!

[NeilW]

Fantastic!!! 😀

Thanks very kindly, works great for the desktop menu, but on mobiles it aligns the sub menus to the right.

In this case, I need the menu button still on the right, but the menu list still left aligned.

I think I have fixed it though at my mobile break-point with the following code:

@media screen and  (max-width: 979px) {
/* Fix to left align menus again on small screens */
	#main-menu {
		float: left !important;
	}

Hopefully, it proves OK.

[Author]

Posts