[3.1][3.2][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!
Anti-Spam Guide
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
ivailo95
Registered User
Posts: 837
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 » Sun Dec 16, 2018 7:12 pm

okay
i will show you a video of example in one other forum
where this navbar is used static and moveable
https://youtu.be/6ugC8jz4yx8

User avatar
ivailo95
Registered User
Posts: 837
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 » Tue Dec 18, 2018 3:17 pm

Do you understand me now? :roll:

User avatar
ivailo95
Registered User
Posts: 837
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 » Sat Jan 05, 2019 7:36 pm

?

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

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

Post by Badhon_raj » 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>

User avatar
ivailo95
Registered User
Posts: 837
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 » Mon Jan 07, 2019 11:59 am

Thanks a lot ! :idea:
by the way maybe need to add following options:
:idea: Display only for Moderators: :idea:
:idea: Display only for Administrators: :idea:

fabiomaticus
Registered User
Posts: 133
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

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

Post by fabiomaticus » Thu Oct 17, 2019 5:42 pm

How to decrease the height of the menu?

fabiomaticus
Registered User
Posts: 133
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

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

Post by fabiomaticus » Fri Oct 18, 2019 9:23 am

What size should be 'logo image? I try to load an image but the system returns a blank page

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

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

Post by Badhon_raj » Thu Oct 31, 2019 7:19 pm

fabiomaticus wrote:
Fri Oct 18, 2019 9:23 am
What size should be 'logo image? I try to load an image but the system returns a blank page
Create this folder manually and give it 777 permission
ext/orthohin/navbar/images/logo

fabiomaticus
Registered User
Posts: 133
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

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

Post by fabiomaticus » Sat Nov 02, 2019 8:04 am

I have set to menu color #232f3e and i have set to phpbb navbar color #a6a6a6

This is result:
Image

If i set to phpbb navbar "background-image: linear-gradient(180deg, #a6a6a6, #ffffff);"

This is result
Image

Why?

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

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

Post by Badhon_raj » Sat Nov 02, 2019 9:14 am

fabiomaticus wrote:
Sat Nov 02, 2019 8:04 am
I have set to menu color #232f3e and i have set to phpbb navbar color #a6a6a6

This is result:
Image

If i set to phpbb navbar "background-image: linear-gradient(180deg, #a6a6a6, #ffffff);"

This is result
Image

Why?
What exactly do you want?
You are setting the background color in the UI, then override it in custom CSS.
What are you expecting it to do?
Either use the UI, or custom CSS. why both?

fabiomaticus
Registered User
Posts: 133
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

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

Post by fabiomaticus » Sat Nov 02, 2019 9:28 am

I want color navbar menu to #232f3e like the first image

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

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

Post by Badhon_raj » Sat Nov 02, 2019 9:37 am

fabiomaticus wrote:
Sat Nov 02, 2019 9:28 am
I want color navbar menu to #232f3e like the first image
then why adding the CSS?

fabiomaticus
Registered User
Posts: 133
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

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

Post by fabiomaticus » Sat Nov 02, 2019 9:55 am

Ok.
So, I use custom css or UI.

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

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

Post by Badhon_raj » Sat Nov 02, 2019 10:04 pm

fabiomaticus wrote:
Sat Nov 02, 2019 9:55 am
Ok.
So, I use custom css or UI.
If you want color navbar menu to #232f3e like the first image, then just use UI.
disable custom CSS.

Post Reply

Return to “Extensions in Development”