News:

Wondering if this will always be free?  See why free is better.

Main Menu

MinDI

Started by Diego Andrés, November 19, 2013, 12:15:09 AM

Previous topic - Next topic

lifeguard81

Is it possible to make the menu so, that its always on top of the page, even if you scroll down?
www.doenwenu.nl
Excuse me for my english. i am from holland :)

Diego Andrés

Quote from: lifeguard81 on February 12, 2014, 02:10:08 PM
Is it possible to make the menu so, that its always on top of the page, even if you scroll down?

Index.template.php
// Show the menu here, according to the menu sub template.
template_menu();


Replace with:
// Show the menu here, according to the menu sub template.
template_menu();

echo '
<br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" />';


Index.css
.main_bar
{
height: 60px;
background: #fff;
padding: 0;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 4px 15px rgba(0,0,0,0.1)
}


Replace  with:
.main_bar
{
height: 60px;
background: #fff;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 1000;
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

lifeguard81

Quote from: Diego Andrés on February 14, 2014, 08:57:01 PM
Quote from: lifeguard81 on February 12, 2014, 02:10:08 PM
Is it possible to make the menu so, that its always on top of the page, even if you scroll down?

Index.template.php
// Show the menu here, according to the menu sub template.
template_menu();


Replace with:
// Show the menu here, according to the menu sub template.
template_menu();

echo '
<br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" />';


Index.css
.main_bar
{
height: 60px;
background: #fff;
padding: 0;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 4px 15px rgba(0,0,0,0.1)
}


Replace  with:
.main_bar
{
height: 60px;
background: #fff;
border-bottom: 1px solid #d6d6d6;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 1000;
}

Sorry for my late comment, but i am gonna try this :)
Yes, it works. Great thanks!
www.doenwenu.nl
Excuse me for my english. i am from holland :)

ForumMix

Neat theme.

How does one do if one does not want to have big letters on the thread title?

Diego Andrés

Theme Updated!
- MinDI is now Responsive

SMF Tricks - Free & Premium Responsive Themes for SMF.

vanbreuk

Hello Diego,

I registered so I could get your input because for some reason we're having a glitch hard to hunt down, and we'd like to fix it before going live with the forum pretty soon. Using SMF 2.0.11 and MinDI Theme with a few simple customizations here - hxxp:wavesplatform.org [nonactive]

The problem is that, after a page refresh (for instance after the first index load) the navigation bar menus will drop down on mouse hover, but vanish as soon as the mouse goes to one of the options. On click they work perfectly fine, but it is annoying. This behavior seemed to start in the beginning as far as I can remember - even before we added a few mods that would modify layout.

We tried to debug without success so far, but I don't even need it to be debugged - just having a good way to completely disable menu dropdown on hover would be perfectly fine, and actually preferable.

Thanks in advance for your help.

vanbreuk

Sorry, correct URL to see the issue:

Quote from: vanbreuk on June 13, 2016, 05:16:54 PM
wavestalk.org

The problem only happens after page load, the first time you hover on a menu options with further levels.

Diego Andrés

Quote from: vanbreuk on June 14, 2016, 07:09:33 PM
Sorry, correct URL to see the issue:

Quote from: vanbreuk on June 13, 2016, 05:16:54 PM
wavestalk.org

The problem only happens after page load, the first time you hover on a menu options with further levels.


It's because hover effect it's removed if you're browsing on a mobile device or tablet. If you're getting this on desktop it will always happen because you would need to reload page to let javascript remove the hover effect

SMF Tricks - Free & Premium Responsive Themes for SMF.

Diego Andrés

Theme updated to SMF 2.0.17
Also some bits of the code have been cleaned up

SMF Tricks - Free & Premium Responsive Themes for SMF.

Smoky "Rider" Blue

Quote from: Diego Andrés on January 27, 2020, 07:55:15 PM
Theme updated to SMF 2.0.17
Also some bits of the code have been cleaned up


Thank you, Diego.. ;)
**Take the time to remember friendships and family.. Sometimes it's all we have, and missed very much**

I B D

wow Smoky lives!

im sloopz

dodos26

#31
Hey i found two bugs:
#1 Login box in the upper right corner is not working.
  - I haven't explored the details yet, but it looks like it's not giving the link correctly.
 
#2 The search window is not the correct size.
  - Probably index.css #search_area input.placeholder --->  width: 50px; was to be given as%
 

dodos26

How fix login menu?

dodos26

Quote from: dodos26 on March 30, 2022, 12:12:37 PMHow fix login menu?

For others who need it!

#1 Go to themes/minDI/css folder and open file index.css and insert:
/**** Full Screen Login *****/
.fullscreen {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
box-sizing:border-box;
z-index:9999999;
background:rgba(0,0,0,0.53);
}
.fullscreen .fs_Inner {
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
min-width:45%;
box-shadow:0 2px 2px rgba(0,0,0,0.15);
padding:20px;
background:#fff;
}
.fullscreen .fs_Inner input.button_submit {
width:100%;
font-size:15px;
letter-spacing:3px;
padding:10px;
}
.fullscreen .fs_Inner .downer {
box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align:center;
line-height:40px;
user-select:none;
}
.fs_inGroup {
position:relative;
margin-bottom:3.5%;
}
.fs_inGroup input {
font-size:18px;
display:block;
width:100%;
border:none;
border-bottom:1px solid rgba(255,255,255,0.65);
color:inherit;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-radius:0;
padding:10px 10px 10px 5px;
}
.fs_inGroup input:focus {
outline:none;
}
.fs_inGroup label {
color:#999;
font-size:1.25em;
font-weight:400;
position:relative;
pointer-events:none;
left:7px;
top:-29px;
transition:.2s ease all;
user-select:none;
}
.fs_inGroup input:focus ~ label,.fs_inGroup input:valid ~ label {
top:-62px;
font-size:14px;
color:#ff8553;
}
.fs_inGroup .fs_bar {
position:relative;
display:block;
}
.fs_inGroup .fs_bar:before,.fs_inGroup .fs_bar:after {
content:'';
height:3px;
width:0;
bottom:0;
position:absolute;
transition:.2s ease all;
background:#ff8453;
}
.fs_bar:before {
left:50%;
}
.fs_inGroup .fs_bar:after {
right:50%;
}
.fullscreen input:focus ~ .fs_bar:before,.fullscreen input:focus ~ .fs_bar:after {
width:50%;
}
.fs_container {
display:block;
position:relative;
padding-left:29px;
margin-bottom:12px;
cursor:pointer;
font-size:14px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.fs_container input {
opacity:0;
}
.fs_checkmark {
position:absolute;
left:0;
background:#fedfd4;
}
.fs_checkmall .fs_checkmark {
width:20px;
height:20px;
top:10%;
}
.fs_container:hover input ~ .fs_checkmark {
background:#ff6120;
}
.fs_container input:checked ~ .fs_checkmark {
background:#EC4500;
}
.fs_checkmark:after {
content:"";
position:absolute;
display:none;
}
.fs_container input:checked ~ .fs_checkmark:after {
display:block;
}
.fs_container .fs_checkmark:after {
border:solid #FFF;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.fs_checkmall .fs_checkmark:after {
left:8px;
top:4px;
width:5px;
height:10px;
border-width:0 3px 3px 0;
}
.fullscreen .button_submit {
text-transform:uppercase;
}
/**** END Full Screen Login *****/
#2 Now go themes/MinDI and open file index.template.php
Find:
                        <li><a href="', $scripturl, '?action=register">', $txt['register'], '</a></li>';
        echo '
                    </ul>
                </li>
            </ul>
        </div>
    </div></nav>';
And replace to:
                        <li><a href="', $scripturl, '?action=register">', $txt['register'], '</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div></nav>
   
    <div id="loginModal" class="modal fullscreen">
        <div class="fs_Inner">
            <script src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
            <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', ' autocomplete="off" >
                <input autocomplete="false" name="hidden" type="text" style="display:none;">
                <div class="fs_inGroup" style="margin-top: 25px;">
                    <input type="text" name="user" size="10" class="input_text" autocomplete="off" required/>
                    <span class="fs_bar"></span>
                    <label>', $txt['username'], '</label>
                </div>
                <div class="fs_inGroup">
                    <input type="password" name="passwrd" size="10" class="input_password" autocomplete="nope" required/>
                    <span class="fs_bar"></span>
                    <label>', $txt['password'], '</label>
                </div>
                <label class="fs_container fs_checkmall">', $txt['always_logged_in'], '
                    <input type="checkbox" name="cookieneverexp" class="input_check" />
                    <span class="fs_checkmark"></span>
                </label>
                <div class="downer">
                    <input type="submit" value="', $txt['login'], '" class="button_submit" />
                    <a href="', $scripturl, '?action=reminder">', $txt['forgot_your_password'], '</a>
                </div>
                <input type="hidden" name="hash_passwrd" value="" /><input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
            </form>
        </div>
    </div>';

Effects:
You cannot view this attachment.

dodos26

#2 Sory fix:
<li><a href="', $scripturl, '?action=register">', $txt['register'], '</a></li>';
echo '
</ul>
</li>
</ul>
</div>
</div></nav>

<div id="loginModal" class="modal fullscreen">
<div class="fs_Inner">
<script src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', ' autocomplete="off" >
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<div class="fs_inGroup" style="margin-top: 25px;">
<input type="text" name="user" size="10" class="input_text" autocomplete="off" required/>
<span class="fs_bar"></span>
<label>', $txt['username'], '</label>
</div>
<div class="fs_inGroup">
<input type="password" name="passwrd" size="10" class="input_password" autocomplete="nope" required/>
<span class="fs_bar"></span>
<label>', $txt['password'], '</label>
</div>
<label class="fs_container fs_checkmall">', $txt['always_logged_in'], '
<input type="checkbox" name="cookieneverexp" class="input_check" />
<span class="fs_checkmark"></span>
</label>
<div class="downer">
<input type="submit" value="', $txt['login'], '" class="button_submit" />
<a href="', $scripturl, '?action=reminder">', $txt['forgot_your_password'], '</a>
</div>
<input type="hidden" name="hash_passwrd" value="" /><input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
</form>
</div>
</div>';

Advertisement: