Struggling with a few CSS things for my menu

Question

I'm trying to make my site's menu bar better for mobile-devices.. I currently have it so it will shrink down to a little click-to-open, drop-down menu that shows my links to other pages..

My first issue I found was my menu was longer than the screen size and I couldn't scroll to show the rest of the content, so I had a look around and have now solved the issue but created another..

Whats happening is, I can open the menu just fine, choose items and scroll inside the menu as expected.. but when I click the menu button again, to hide the menu again, the links 'pull out of sight' but it leaves the background of the menu on show..

@media (max-width: 767px) {
.scroll-to-top {
    display: none;
}
.show-menu {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    width: 100%;
    height: 300px;
    z-index: 999;
    overflow-y: scroll;
    -webkit-transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
}}

I had trouble getting the scrollable menu to work but finally, I found adding the "height: xx;" part solved that issue..

I'm not very clued up about all of this stuff but try and learn from editing existing examples etc.

Can anyone see anything obvious?

[Solved]

2

(Same menu as before.)

I found this last night that I have added to my site:

@media (min-width: 768px) {.dropdown-menu li:hover .menu {visibility: visible;}}
@media (min-width: 768px) {.dropdown:hover .dropdown-menu {display: block;}}

I believe it makes my menu's click-to-display, when they would normally be hovered over when your viewing the site on a mobile-device..

I'd like to add an additional statement that sort of does the opposite, so if you were to click on an open menu, it would close again..

3

(same menu)

The way my theme I am using on my site was constructed, makes 3rd level menu items appear as a bulleted list below the 2nd level link..

I would like to change this so the 3rd level links are also, not shown as a list but rather have their own menu that drops out as well..

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul>';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

}

Like I've mention before, I really don't have much knowledge about this stuff, but I believe the above code constructs the menu..

Any help appreciated and I can provide more code chunks / links if needed! :)

Many thanks!

Can you add a jsfiddle link so we can understand better what the issue is? Thanks — BahaEddine Ayadi, Jul 29 '15 at 15:22
Like I said I'm not really too clued about this stuff and I'm not even sure what parts to include or not for a 'jsfiddle' (just looked them up :P) [link](http://420Connect.co.uk) is my live site, probably the best way to understand the issue.. (make your browser window very small, then open and close the menu) — Fourtwenty Connect, Jul 29 '15 at 15:32
Figure out what code is your related code, all we can see is the code after the page loads and how the browser is rendering it. If you want us to work on it, it helps if you work a little to make our job easier. — Adam Buchanan Smith, Jul 29 '15 at 15:42
`@media (max-width: 767px)` , you need to change the height:300px in the .show-menu class by max-height:300px, the menu worked perfectly like this. — BahaEddine Ayadi, Jul 29 '15 at 15:46
Sorry - I can't seem to "put what jsfiddle wants" into it to display my site.. & Thank you very much @ayadibaha - that worked perfectly! :D ~ Thats been driving me nuts! I have another thing I'd like to change with the menu, should I make a seperate topic? — Fourtwenty Connect, Jul 29 '15 at 15:56
If it's not about the menu , then you should make another question. If it's the same, you can just edit this question and add your other one. Just tell me if you're going to make another question, so i'll post my answer in here to close that one, and i'll check your new one.. Happy that i helped! — BahaEddine Ayadi, Jul 29 '15 at 15:59
Correct me if I understood wrong : For the 2nd question , you want to make the menus open when clicking not when hovering, right? and make it close when clicking as well. And for the 3rd question, I don't get what you mean, and I looked in the website for it, but I couldn't find it in there either. Can you provide the HTML code for it, not the php one, the produced one at the end? Thanks @FourtwentyConnect — BahaEddine Ayadi, Jul 29 '15 at 16:41
Yep, we've on the same page for my 2nd question. - (open/close when clicked) & Ah, sorry - for guests - no 3rd level menu's are shown.. You may login with user/pass: "smftest" for both. - you should be able to see what I mean now.. @ayadibaha — Fourtwenty Connect, Jul 29 '15 at 18:04

score 0 · Answer 1 · answered Jul 29 '15 at 20:43

2: You need to add this jquery code under a script tag :

if(screen.width<=768){
$('.dropdown').on('click',function(){
    $('.dropdown-menu').toggle();
});
}

And you should delete the styling that you just posted in your question.

3: This is the code for it :

echo '
<div id="menu">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav">';

        foreach ($context['menu_buttons'] as $act => $button)
        {
            echo '
                    <li id="button_', $act, '" class="', $button['active_button'] ? 'active ' : '', '', !empty($button['sub_buttons']) ? 'dropdown' : '', '">
                        <a ', !empty($button['sub_buttons']) ? 'class="dropdown-toggle"' : '', ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                            ', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $act. '.png" alt="'. $button['title']. '" title="'. $button['title']. '"/>&nbsp;' : '', '', $button['title'], '', !empty($button['sub_buttons']) ? ' <span class="caret"></span>' : '' ,'
                        </a>';
            if (!empty($button['sub_buttons']))
            {
                echo '
                        <ul class="dropdown-menu" role="menu">';

                foreach ($button['sub_buttons'] as $childact => $childbutton)
                {
                    echo '
                            <li>
                                <a ', !empty($childbutton['sub_buttons']) ? 'class="dropdown-toggle1"' : '',' href="#"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                    <span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', !empty($modSettings['smi_enable']) ? '<img style="vertical-align: middle;" src="'. $settings['default_images_url']. '/smi/'. $childact. '.png" alt="'. $childbutton['title']. '" title="'. $childbutton['title']. '"/>&nbsp;' : '', '', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
                                </a>';
                    // 3rd level menus :)
                    if (!empty($childbutton['sub_buttons']))
                    {
                        echo '
                                <ul class="dropdown-menu1" role="menu" style="display:none;position:relative;border:none;box-shadow:none;">';

                        foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                            echo '
                                    <li>
                                        <a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                            <span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
                                        </a>
                                    </li>';

                        echo '
                                </ul>';
                    }

                    echo '
                            </li>';
                }
                    echo '
                        </ul>';
            }
            echo '
                    </li>';
        }

        echo '
                </ul>
            </div>
        </div>
    </div>
</div>';

And you should add this jquery code as well (like in the 2) :

$('.dropdown-toggle1').on('click',function(){
        $('.dropdown-menu1').toggle();
    });

Note: I used the click event in those list items , so I should make the anchor href="#". If you want to make them appear at hovering, you should make it with CSS like your 2nd issue was.

Struggling with a few CSS things for my menu

[Solved]

2

3

1 Answers1