what is with the nav bar items moving

[Zug]

When it comes to code I am totally useless. The arrows are because of the permission levels of users compared to admins.
I see the admin login panel there. let me post the screen shot what I see.

Anything to do with code is hard for me

... Well hmm .. Maybe that is all the more reason to have a forum dedicated to coding and design. Maybe you can learn something after 20 years of running this board, aye?

[HeidiHoe]

Hell, I have no intention to dig into all the Bootstrap crap. Is the navbar the only reason that you added Bootstrap? To do a top navbar only takes a view lines of code and css. It's not really that complicated. Perhaps adding a bunch of code that isn't used just slows things down for no reason. Use @media in the css to establish the break points. You can use as many as you need to make it look right across devices and screen sizes.

Bootstrap has all that in there by default. He is using the bootstrap core css file. One purpose of using a custom.css file is to over-ride its defaults among other things to style it to match your site.

Obviously there is a conflict somewhere with css definitions between phpbb css and bootstrp core css.

Why not ditch Bootstrap, add a custom css hand coding the damn thing? It's a few lines of css. Problem solved.

[TheButcher]

Hell, I have no intention to dig into all the Bootstrap crap. Is the navbar the only reason that you added Bootstrap? To do a top navbar only takes a view lines of code and css. It's not really that complicated. Perhaps adding a bunch of code that isn't used just slows things down for no reason. Use @media in the css to establish the break points. You can use as many as you need to make it look right across devices and screen sizes.

Bootstrap has all that in there by default. He is using the bootstrap core css file. One purpose of using a custom.css file is to over-ride its defaults among other things to style it to match your site.

Obviously there is a conflict somewhere with css definitions between phpbb css and bootstrp core css.

Why not ditch Bootstrap, add a custom css hand coding the damn thing? It's a few lines of css. Problem solved.

If I knew how I would, I just don't know HeidiHoe. As I said when it comes to any code I am blind as a bat.

[Zug]

Remove this line:

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">

Remove the navbar code and see if that fixes the arrow issue. If it does which I am sure it will, then there is css conflict between multiple css files.

You would need to have your own custom css file to over-ride navbar css.

[TheButcher]

Remove this line:

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">

Remove the navbar code and see if that fixes the arrow issue. If it does which I am sure it will, then there is css conflict between multiple css files.

You would need to have your own custom css file to over-ride navbar css.

Removed but as you will notice on refresh it is messed up, once you check it please let me know I'll upload the last copy of the header file.

[Zug]

[HeidiHoe]

There's free dynamic navbar snippets on the web that do an excellent job without causing conflict. stackoverflow.com and w3schools.com are good resources and there's a bunch more if you do a web search

[TheButcher]

Not what I see, refresh the page please.

[TheButcher]

There's free dynamic navbar snippets on the web that do an excellent job without causing conflict. stackoverflow.com and w3schools.com are good resources and there's a bunch more if you do a web search

I'll work on it thanks HeidiHoe

[Zug]

It's something in here conflicting:

Code: Select all

<br>
<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
					<div class="inner">


					</div>
				<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="nav-main linklist" role="menubar">

		<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>Quick links</span>
			</a>
			<div class="dropdown">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					
											<li class="separator"></li>
													<li>
								<a href="./search.php?search_id=egosearch" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>Your posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=newposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>New posts</span>
								</a>
							</li>
																			<li>
								<a href="./search.php?search_id=unreadposts" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>Unread posts</span>
								</a>
							</li>
						                                                   					
					
					<li class="separator"></li>

									</ul>
			</div>
		</li>

<Li>
</Li>


		</li>
			

<li class="mchat-nav" data-skip-responsive="true" data-select-match="mchat">
	<div class="mchat-nav-container dropdown-container">
		<a href="/app.php/mchat" title="No one is chatting" class="mchat-nav-link-title dropdown-trigger" role="menuitem">
			<i class="icon fa fa-weixin fa-fw" aria-hidden="true"></i><span class="mchat-nav-link">mChat</span><i class="icon fa fa-caret-down mchat-nav-caret" aria-hidden="true"></i>
		</a>
		<div class="dropdown">
			<div class="pointer"><div class="pointer-inner"></div></div>
			<ul class="mchat-nav-menu dropdown-contents" role="menu">
													<li class="mchat-nav-custom-page">
						<a href="/app.php/mchat" title="mChat page" role="menuitem">
							<i class="icon fa fa-weixin fa-fw" aria-hidden="true"></i><span>mChat page</span>
						</a>
					</li>
																	<li class="mchat-nav-archive">
						<a href="/app.php/mchat/archive" title="Archive" role="menuitem">
							<i class="icon fa fa-history fa-fw" aria-hidden="true"></i><span>Archive</span>
						</a>
					</li>
																											</ul>
		</div>
	</div>
</li>

				
					<li id="username_logged_in" class="rightside  no-bulletin" data-skip-responsive="true">
						<div class="header-profile dropdown-container">
				<a href="./ucp.php" class="header-avatar dropdown-trigger"><img class="avatar" src="./download/file.php?avatar=1880_1676145049.jpg" width="110" height="110" alt="User avatar" />  <span class="username">Zug</span></a>
				<div class="dropdown">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						
					
						<li>
							<a href="./ucp.php" title="User Control Panel" role="menuitem">
								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>User Control Panel</span>
							</a>
						</li>
													<li>
								<a href="./memberlist.php?mode=viewprofile&amp;u=1880" title="Profile" role="menuitem">
									<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>Profile</span>
								</a>
							</li>
						
						
						<li class="separator"></li>
						<li>
							<a href="./ucp.php?mode=logout&amp;sid=cd4157c740fb4f35d0561d396c8ed090" title="Logout" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>Logout</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
					</li>
															<li class="rightside" data-skip-responsive="true">
														<a href="./ucp.php?i=pm&amp;folder=inbox" role="menuitem">
									<i class="icon fa-share fa-fw" aria-hidden="true"></i><span>Private messages </span><strong class="badge hidden">0</strong>
								</a>
													</li>
						

					<li class="dropdown-container dropdown-right rightside" data-skip-responsive="true">
				<a href="./ucp.php?i=ucp_notifications" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>Notifications </span><strong class="badge hidden">0</strong>
				</a>
				<div id="notification_list" class="dropdown dropdown-extended notification_list">
	<div class="pointer"><div class="pointer-inner"></div></div>
	<div class="dropdown-contents">
		<div class="header">
			Notifications
			<span class="header_settings">
				<a href="./ucp.php?i=ucp_notifications&amp;mode=notification_options">Settings</a>
							</span>
		</div>

[TheButcher]

Zug after removing

Code: Select all

<link rel="stylesheet" href="/assets/bs/502/css/bootstrap.min.css">

I see

[Zug]

The navbar menu and the banner needs to be inside your body of phpbb.

Everything above where it says Quicklinks and Mchat ... That Little thin area is where your banner and nav should be. INSIDE the phpbb body. Not above it.

Everything you have above the phpbb is not correct. at least in my opinion.

[Zug]

The navbar menu and the banner needs to be inside your body of phpbb.

Everything above where it says Quicklinks and Mchat ... That Little thin area is where your banner and nav should be. INSIDE the phpbb body. Not above it.

Everything you have above the phpbb is not correct. at least in my opinion.

In here .. in that small thin area of gray just above the links and in between the banner..



See where I mean? Where it begins the gray area is where phpbb body begins.

[Zug]

.. in here ...

Code: Select all

<br>
<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	<div id="page-header">
		<div class="headerbar" role="banner">
					<div class="inner">


					</div>
				<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="nav-main linklist" role="menubar">

Try typing TEST AREA in this part of your code .. between the empty area:

Code: Select all

					<div class="inner">


					</div>
				

[TheButcher]

I'll mess with it tomorrow not to be rude I have to go now, friends showed up have to get off the laptop until they leave.

Thanks for everything Zug and HeidiHoie.

Peace