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

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Scam Warning
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
Jorup16
Registered User
Posts: 427
Joined: Sun Dec 14, 2008 5:13 am
Location: Zacapa, Guatemala
Name: Jorge
Contact:

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

Post by Jorup16 »

Following this extension. Thank you
Spanish Translations for Ext phpBB :D - Traducciones al español para Ext phpBB :)
>>>>> https://github.com/Jorup16 <<<<<
TexTHKM
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by TexTHKM »

This is a fantastic extension, following this closely! :D

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? :P
TexTHKM
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by 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
Annotation 2020-05-06 231113.jpg (7.51 KiB) Viewed 2967 times
Badhon_raj
Registered User
Posts: 204
Joined: Wed Jan 04, 2012 6:33 pm

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

Post by Badhon_raj »

TexTHKM wrote: Wed May 06, 2020 9:11 pm 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
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by TexTHKM »

Badhon_raj
Registered User
Posts: 204
Joined: Wed Jan 04, 2012 6:33 pm

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

Post by Badhon_raj »

TexTHKM wrote: Thu May 07, 2020 8:36 am 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
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by TexTHKM »

Badhon_raj wrote: Thu May 07, 2020 7:22 pm
TexTHKM wrote: Thu May 07, 2020 8:36 am 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! :D

Did you also manage to have a look at my post above it? (about logo svg) =)
Badhon_raj
Registered User
Posts: 204
Joined: Wed Jan 04, 2012 6:33 pm

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

Post by Badhon_raj »

TexTHKM wrote: Thu May 07, 2020 9:34 pm Did you also manage to have a look at my post above it? (about logo svg) =)
Ok, will check.
TexTHKM
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by 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
Registered User
Posts: 61
Joined: Sun Sep 28, 2008 3:31 pm

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

Post by TexTHKM »

TexTHKM wrote: Thu May 07, 2020 9:59 pm
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
Registered User
Posts: 195
Joined: Sun Feb 10, 2013 7:12 pm
Location: Netherlands
Contact:

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

Post by 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
''A man searching for lost paradise can seem a fool to those who have never sought the other world''
-JM
Badhon_raj
Registered User
Posts: 204
Joined: Wed Jan 04, 2012 6:33 pm

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

Post by Badhon_raj »

TexTHKM wrote: Sat May 09, 2020 5:10 am 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.
Maclobster wrote: Thu May 14, 2020 1:18 pm 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
Registered User
Posts: 195
Joined: Sun Feb 10, 2013 7:12 pm
Location: Netherlands
Contact:

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

Post by Maclobster »

Thank you
''A man searching for lost paradise can seem a fool to those who have never sought the other world''
-JM
User avatar
bennybernaer
Registered User
Posts: 599
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

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

Post by 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
Naamloos.png (10.71 KiB) Viewed 2344 times

How can I make those icons bigger ?

Edit:
Fixed!
User avatar
ivailo95
Registered User
Posts: 1067
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo
Contact:

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by ivailo95 »

Badhon_raj wrote: Sat Jan 05, 2019 9:50 pm
ivailo95 wrote: Tue Dec 18, 2018 3:17 pm Do you understand me now? :roll:
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 :roll:
For REALLY good and VERY cheap hosting CLICK HERE
Watch "Lost in a random" game, it's the best
Post Reply

Return to “Extensions in Development”