Bootstrap 3 Full Width Sub Menu

HTML & CSS
1

Hi

I am trying to get my submenu drop down span the FULL width of the screen. I am not sure how to break it out of the Bootstrap 3 structure in order to achieve what I am after.

http://www.cre8tivesource.co.uk/bluetown/navigation.htm

Could somebody please help and advise how I can do this?

Many Thanks

2

Well the dropdown menu will base its coordinates and width off of the nearest stacking context. So we just need to unset them. Here are all the potential stacking contexts (i.e. parents that have position:relative)

.menu li (the LIs)
.menu (the parent <ul>)
col-md-10 col-sm-10 columns (the <div> parent right above .menu)

So on .menu{} and .menu li{} you can simply remove the position:relative set. However, on the bootstrap classes element…I’d simply add a class. For example, add in the class “position-none” and then in your custom CSS file, add in the below

.position-none
{
  position:static!important;
}

This will undo the position:relative on the bootstrap and make the dropdown look to the next stacking context, and now it will be <body> which spans the full page.

3

Hi Ryan

Thanks for the response, but I am sorry I do not full understand I have updated the link, I removed position:relative and added the class position-none, but I must be doing something very wrong!

Thanks again.

4

You removed ALL the code for hte menu.

Please revert it back to the original and I can walk you through.

You were ONLY supposed to remove position:relative on those classes. Not ALL the CSS for the menu.

Also, you did apply the class of position-none but I don’t see it in your CSS file? Did you not follow my instructions and add the CSS I posted to your CSS file…?

5

Hi Ryan

That is odd, I did add the new class and did not remove the menu?

Anyway it is now back to how it was when I first posted.

Thanks again.

6

Whatever you did caused all the CSS in your theme.css not apply to the menu. The menu was unstyled when you did the original changes I requested so something got screwed up somewhere.

  1. Open up your theme.css file – http://www.cre8tivesource.co.uk/bluetown/css/theme.css

  2. CTRL+F (search) and find .menu {}. You will see position:relative on there. ONLY remove position:relative. Nothing else.

  3. CTRL+F (search) and find .menu li {}. You will see position:relative on there. ONLY remove position:relative. Nothing else. .menu li{} is RIGHT below .menu so you don’t need to search if you don’t want to

  4. Go to the end of your CSS file. Add in this code

    .position-none {
    position:static!important;
    }

  5. Now in your HTML file for that page, find the <ul class="menu"> element. Look directly above and you will see a div that has class=“col-md-10 col-sm-10 columns”. On that element, ADD in the class “position-none”. Your new class string will look like this “col-md-10 col-sm-10 columns position-none”

  6. Now go to your dropdown in the HTML…class=“.subnav-fullwidth”. That element has an inline style of width:1170px. Remove that.

  7. Go back to your theme.css file and on “.subnav-fullwidth” please add in “width:100%;” to that CSS class.

  8. Save all changes and report back.

7

Hi Ryan

Ok all done, the inline-style with width:1170px, must be being added via the js file/ js/scripts, but not sure how to remove this?

The link is updated.

Really appreciate all your help!

Thanks

8

Ok, well I’m not exactly sure what you are using Javascript for in the dropdown. Is your Javascript doing anything special for the dropdown menu besides showing it? Because that can be done in CSS and Javascript is not needed. You can remove the dropdown JS if that’s the cas.e

10

You can over-ride the inline styling like this:

.subnav-fullwidth{
left:0!important;
right:0;!important;
width:auto!important
}

You have to be careful with those bootstrap menus as they are coded for the whole range and you will need to take care of the smaller screen version when the hamburger kicks in.

11

Hi

The theme is taken from this - http://www.mediumra.re/pivot/index.html

The javascript maybe needed for the sticky menu and the overlay bar when you scroll the page down?

Just a thought?

12

Yes Javascript is being used for that. However CSS can make the menu sticky. The Javascript is also having it fade in, which CSS can basically replicate. Remove the Javascript for the menu and we will go from there as to recreating it in CSS. A more stable approach, for sure.

13

Hi

OK I think I have done it right, I commented reference to subnav-fullwidth within js/scripts.js.

Although Paul’s comment did also work.

Look forward to hearing from you.

14

Yes Pauls would definitely work but it would be best to get this done and get a good structure.

Also I see that there is still Javascript at play with the menu, and it doesn’t seem to have lost any functionality. Did you comment out the right script?

I just looked at the live site and I don’t see any scripts commented out.

15

Hi Ryan

If you look here - http://www.cre8tivesource.co.uk/bluetown/js/scripts.js and search for subnav-fullwidth

That is what I commented out

Hope that helps?

16

There is more Javascript in that JS file that is being used (e.g. search for nav-sticky…)

Can’t you just comment out ALL javascript in the HTML file? Or remove it? This is a test page.

17

Hi

I have commented out the call to scripts.js from the page.

Thanks

18

Hi Ryan

Was wondering if you have had a chance to look at this again?

Thanks again.

19

in bootstrap there is an option like dropdown menu and give carat class for that you get dropdown symbol

20

Davvam, I missed this thread. Do you still need me to look?

21

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.