Announcement

Collapse
No announcement yet.

Help needed to center align sub nav menu dependent on the parent width

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help needed to center align sub nav menu dependent on the parent width

    I have been working on a bootstrap menu that eventually I want to customise to look like the image attached nav.jpg (attached)

    I have been able to get the initial 'GB' hover sub nav working quite close at http://www.bubbleweb.eu/ewp-nav2/nav.php - the problem I am having is with the 'ENGLAND' dropwdown, which isn't aligning correct because I have fored the sub nav:

    .navbar-nav>li>.dropdown-menu{
    • left: -120%;
    }

    to align the 'GB' menu point below.

    Does anybody have any advice to control this via css to align the sub nav below the parent dependent on the width of the parent nav?

    Your thoughts would be very much appreciated.

    Cheers,
    Jay
    Attached Files
    Last edited by sstoney2001; 08-30-2016, 09:45 AM.
    Rent Villas Nerja Spain Rent Villas in Nerja, Spain
    Deep House Radio London UK Blend stream the very best deep and funky house 24/7!

  • #2
    If I understand you correctly, you want the dropdown menu to be centered on the parent width? Have you tried navbar-nav>li>.dropdown-menu {margin: 0px auto;}
    Cat-herder Extraordinaire

    Comment


    • #3
      Originally posted by Pegasus View Post
      If I understand you correctly, you want the dropdown menu to be centered on the parent width? Have you tried navbar-nav>li>.dropdown-menu {margin: 0px auto;}
      Hi Pegasus, thanks for your reply

      Well I want to also take into account the width of the sub menu against the parent to make sure it is center aligned if that makes sense? So the parent menu GB is very narrow but I want the width of sub menu to align equally like screen shot attached if that's possible.
      Rent Villas Nerja Spain Rent Villas in Nerja, Spain
      Deep House Radio London UK Blend stream the very best deep and funky house 24/7!

      Comment


      • #4
        I also tried your advice:

        navbar-nav>li>.dropdown-menu {margin: 0px auto;}

        but that didn't appear to do much only push the sub nav back to left align like screenshot attached..

        Attached Files
        Rent Villas Nerja Spain Rent Villas in Nerja, Spain
        Deep House Radio London UK Blend stream the very best deep and funky house 24/7!

        Comment


        • #5
          Hi there sstoney2001,

          I used to help members with their coding problems.

          Now they appear to be using "Turdpress","Bootcrap" and other
          ready made stuff, instead of learning how to code themselves.

          To me this a bad choice, because it is very difficult to override
          the installed frameworks' code ....
          HTML, CSS and JavaScript Frameworks - Incompetent Nonsense
          ...so I don't bother to to try anymore.
          Last edited by coothead; 08-30-2016, 03:40 PM.


          ~ the original bald headed old fart ~

          Comment


          • #6
            Okay, I think I've got it. Add the left: -120%; to a style just for the GB menu and change the .dropdown-menu CSS to left: -45%;
            Cat-herder Extraordinaire

            Comment

            Working...
            X