[3.3][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

[Jorup16]

Following this extension. Thank you

[TexTHKM]

This is a fantastic extension, following this closely!

PS: Can you add support for .svg logo?

ALso, I tried to fix the width of the bar with:
nav.navbar.yamm{
max-width: 1400px;
margin: 0 auto;
}

But now it looks like this:

Annotation 2020-05-06 005400.jpg

How do I get rid of the white areas on each side of the bar?

[TexTHKM]

Also, this is how it looks on mobile:

Screenshot_20200506-225238_Chrome.jpg

Looks weird and displaced.

Possible to move the menu to the left side, and make it look more like this bootstrap menu?

Annotation 2020-05-06 231113.jpg

[Badhon_raj]

Also, this is how it looks on mobile:
Screenshot_20200506-225238_Chrome.jpg
Looks weird and displaced.

Possible to move the menu to the left side, and make it look more like this bootstrap menu?
Annotation 2020-05-06 231113.jpg

It should look like that.

probably some css interfaring with it.
May I have a link to your board?

[TexTHKM]

Yes of course. It's https://community.swordsandravens.net/index.php

[Badhon_raj]

Yes of course. It's https://community.swordsandravens.net/index.php

Minified iso_bootstrap is the problem.

Please download this file and place it in
/ext/orthohin/navbar/styles/all/theme/

after that open
/ext/orthohin/navbar/styles/all/template/event/overall_header_stylesheets_after.html

find the first line

Code: Select all

<!-- INCLUDECSS @orthohin_navbar/iso_bootstrap3.3.7min.css -->

replace with

Code: Select all

<!-- INCLUDECSS @orthohin_navbar/iso_bootstrap3.3.7.css -->

or download again from github.

[TexTHKM]

Yes of course. It's https://community.swordsandravens.net/index.php

Minified iso_bootstrap is the problem.

Please download this file and place it in
/ext/orthohin/navbar/styles/all/theme/

after that open
/ext/orthohin/navbar/styles/all/template/event/overall_header_stylesheets_after.html

find the first line

Code: Select all

<!-- INCLUDECSS @orthohin_navbar/iso_bootstrap3.3.7min.css -->

replace with

Code: Select all

<!-- INCLUDECSS @orthohin_navbar/iso_bootstrap3.3.7.css -->

or download again from github.

Thank you! =) Great extension!

Did you also manage to have a look at my post above it? (about logo svg) =)

[Badhon_raj]

Did you also manage to have a look at my post above it? (about logo svg) =)

Ok, will check.

[TexTHKM]

Thanks.

So I have four questions/requests, if that's possible =)

1) Bug when using fixed width.

When I enter

nav.navbar.yamm{
max-width: 1400px;
margin: 0 auto;
}

The bar get white areas on both sides of the navbar.

Annotation 2020-05-06 005400.jpg

2) Adjust the height of the navbar slightly.


3) That the forum name inherits the color that is placed in the navbar ACP. (I currently have placed white there, but the name of the forum inherits the styling of the main style, which I don't want).


4) .svg support for logos placed in the nav bar.


Thank you so much!

[TexTHKM]

b]1)[/b] Bug when using fixed width.

When I enter

nav.navbar.yamm{
max-width: 1400px;
margin: 0 auto;
}

The bar get white areas on both sides of the navbar.
Annotation 2020-05-06 005400.jpg


2) Adjust the height of the navbar slightly.


3) That the forum name inherits the color that is placed in the navbar ACP. (I currently have placed white there, but the name of the forum inherits the styling of the main style, which I don't want).


4) .svg support for logos placed in the nav bar.

Did you have time to look at this?

[Maclobster]

Hi great ext

Just a question, is it possible to only enable this on 1 style, we have 3 styles, and we like to use this ext for the mobile version only (prosilver)

Regards

[Badhon_raj]

Did you have time to look at this?

sorry, have been busy lately.
have added svg support.

to adjust height and set color, you need to use css for now.

Hi great ext

Just a question, is it possible to only enable this on 1 style, we have 3 styles, and we like to use this ext for the mobile version only (prosilver)

Regards

Not possible as is, but you can do so by editing template files of your style and renaming the event file I think.

[Maclobster]

Thank you

[bennybernaer]

Code: Select all

.bootstrap {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}

I changed the text size to 18 px. However, the icons remain at 14 px how do I change it to 18 px in the menu (also only in the menu)

Naamloos.png

How can I make those icons bigger ?

Edit:
Fixed!

[ivailo95]

Do you understand me now?

ok, I understand this.
You want a settings button on the navbar to switch between static/fixed mode.

I'll just send you the code they used in their site.
I'm not sure if I'll include this in the extension though.


ext/orthohin/navbar/styles/all/template/event/overall_header_body_before.html

Code: Select all

<style type="text/css">
  .bootstrap .navbar .nav > li > a:hover,
  .bootstrap .navbar .nav > li > a:focus {
    background-color: rgba(0,0,0,0.10) !important;
  }
  <!-- IF IS_COLOR -->
  .bootstrap .navbar .nav > li > a,
  /*.bootstrap .navbar ul.dropdown-menu,*/
  .bootstrap .navbar {
    background-color: {BACKGROUND_COLOR};
  }
  .bootstrap .navbar .navbar-toggle .icon-bar{
    background-color: {TEXT_COLOR};
  }
  a.navbar-brand,
  a.navbar-brand:hover,
  .bootstrap .navbar .nav > li > a {
    color: {TEXT_COLOR};
  }
  <!-- ENDIF -->
</style>

<div class="bootstrap">
  <nav class="navbar yamm <!-- IF not IS_COLOR --> navbar-default <!-- ENDIF -->navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- IF LOGO_IMAGE_EXIST -->
            <img height= "50px" src="{LOGO_FILENAME}" alt="{SITENAME}"/>
          <!-- ELSE -->
            <a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITENAME}</a>
          <!-- ENDIF -->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav <!-- IF MENU_POSITION -->navbar-right<!-- ENDIF -->">
          <!-- BEGIN menu -->
            <!-- IF menu.IS_MEGA -->
            <li class="drop-down">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
              <ul class="dropdown-menu mega-menu">

                    {menu.MEGA_HTML}

              </ul>
            </li>
              <!-- ELSE -->
              <li>
                <!-- IF not .menu.sub -->
                <a href="{menu.URL}"<!-- IF menu.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{menu.ICON}"></i>&nbsp;{menu.NAME}</a>

                <!-- ELSE -->
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
                <!-- ENDIF -->
                <!-- IF .menu.sub -->
                <ul class="dropdown-menu">
                  <!-- BEGIN sub -->
                  <li><a href="{sub.URL}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{sub.ICON} icon-flip-horizontal"></i>&nbsp;{sub.NAME}</a></li>
                  <!-- END sub -->
                </ul>
                <!-- ENDIF -->
              </li>
            <!-- ENDIF -->
          <!-- END menu -->
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style=""><i class="fa fa-cog"></i>&nbsp;<span class="caret"></span></a>
              
              <ul class="dropdown-menu">
                <li><a href="#" id="makeStatic">Static</a></li>
                <li><a href="#" id="makeFixed">Fixed</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>

ext/orthohin/navbar/styles/all/template/event/overall_footer_body_after.html

Code: Select all

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
});

	// https://amxx-bg.info
	// 1fRaNkkK
	const body             = document.querySelector('body');
	const navbar           = document.querySelector('nav.navbar.yamm');
	const navbarMakeStatic = document.querySelector('#makeStatic');
	const navbarMakeFixed  = document.querySelector('#makeFixed');
	
	navbarMakeStatic.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'fixed');
		window.location.reload(true);
	});
	navbarMakeFixed.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'static');
		window.location.reload(true);
	});

	if (localStorage.getItem('defaultNav') === 'fixed') {

		navbar.classList.remove('navbar-fixed-top');
	 	navbar.classList.add('navbar-static-top');
		body.style.paddingTop = '0';

	} else if (localStorage.getItem('defaultNav') === 'static') {

		navbar.classList.remove('navbar-static-top');
	 	navbar.classList.add('navbar-fixed-top');
		body.style.paddingTop = '80px';

	}
</script>

is thos code work for 3.3.2