Need Help About Width

[yusufdj]

Hi, how do I make the portion shown in the image below like the width of the wrap? I use the prosilver theme. I want to do navbar articles at wrap level.


https://i.hizliresim.com/GZJdYV.png

[Raul [ThE KuKa]]

Hi,

Forum URL, phpBB version, Style name and version...?

[yusufdj]

Hi,

Forum URL, phpBB version, Style name and version...?

Hi, I'm working on localhost. Phpbb latest version. Original prosilver theme.

[Raul [ThE KuKa]]

Hi,

.wrap is in the common.css file

Code: Select all

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}

You can test using % instead of px for example, change this line:
max-width: 1152px; to this max-width: 95%;

Note that you may also have to modify the responsive.css file for some resolutions.

[yusufdj]

Hi,

.wrap is in the common.css file

Code: Select all

.wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}

You can test using % instead of px for example, change this line:
max-width: 1152px; to this max-width: 95%;

Note that you may also have to modify the responsive.css file for some resolutions.

navbar can also stand width. I want to do the wrap settings in navbar.

[Gumboots]

Looks like you have taken the navbar markup and placed it outside the .wrap div. Easiest solution: make another div with the .wrap class inside your navbar. Use that to hold the navbar content. It will restrict the content width to the same width as the forum, while letting the navbar itself span the full width of the window.

[yusufdj]

Looks like you have taken the navbar markup and placed it outside the .wrap div. Easiest solution: make another div with the .wrap class inside your navbar. Use that to hold the navbar content. It will restrict the content width to the same width as the forum, while letting the navbar itself span the full width of the window.

navbar_header.html no exit wrap code;

Code: Select all

<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<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>{L_QUICK_LINKS}</span>
			</a>
			<div class="dropdown">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					<!-- EVENT navbar_header_quick_links_before -->

					<!-- IF S_DISPLAY_SEARCH -->
						<li class="separator"></li>
						<!-- IF S_REGISTERED_USER -->
							<li>
								<a href="{U_SEARCH_SELF}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_SELF}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF S_USER_LOGGED_IN -->
							<li>
								<a href="{U_SEARCH_NEW}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_NEW}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF S_LOAD_UNREADS -->
							<li>
								<a href="{U_SEARCH_UNREAD}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_UNREAD}</span>
								</a>
							</li>
						<!-- ENDIF -->
							<li>
								<a href="{U_SEARCH_UNANSWERED}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_UNANSWERED}</span>
								</a>
							</li>
							<li>
								<a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>{L_SEARCH_ACTIVE_TOPICS}</span>
								</a>
							</li>
							<li class="separator"></li>
							<li>
								<a href="{U_SEARCH}" role="menuitem">
									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
								</a>
							</li>
					<!-- ENDIF -->

					<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
						<li class="separator"></li>
						<!-- IF S_DISPLAY_MEMBERLIST -->
							<li>
								<a href="{U_MEMBERLIST}" role="menuitem">
									<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>{L_MEMBERLIST}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF U_TEAM -->
							<li>
								<a href="{U_TEAM}" role="menuitem">
									<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>{L_THE_TEAM}</span>
								</a>
							</li>
						<!-- ENDIF -->
					<!-- ENDIF -->
					<li class="separator"></li>

					<!-- EVENT navbar_header_quick_links_after -->
				</ul>
			</div>
		</li>

		<!-- EVENT overall_header_navigation_prepend -->
		<li <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->>
			<a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
				<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
			</a>
		</li>
		<!-- EVENT overall_header_navigation_append -->
		<!-- IF U_ACP -->
			<li data-last-responsive="true">
				<a href="{U_ACP}" title="{L_ACP}" role="menuitem">
					<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>{L_ACP_SHORT}</span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF U_MCP -->
			<li data-last-responsive="true">
				<a href="{U_MCP}" title="{L_MCP}" role="menuitem">
					<i class="icon fa-gavel fa-fw" aria-hidden="true"></i><span>{L_MCP_SHORT}</span>
				</a>
			</li>
		<!-- ENDIF -->

	<!-- IF S_REGISTERED_USER -->
		<!-- EVENT navbar_header_user_profile_prepend -->
		<li id="username_logged_in" class="rightside <!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
			<!-- EVENT navbar_header_username_prepend -->
			<div class="header-profile dropdown-container">
				<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF --> {CURRENT_USERNAME_SIMPLE}</a>
				<div class="dropdown">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						<!-- IF U_RESTORE_PERMISSIONS -->
							<li>
								<a href="{U_RESTORE_PERMISSIONS}">
									<i class="icon fa-refresh fa-fw" aria-hidden="true"></i><span>{L_RESTORE_PERMISSIONS}</span>
								</a>
							</li>
						<!-- ENDIF -->

					<!-- EVENT navbar_header_profile_list_before -->

						<li>
							<a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">
								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>{L_PROFILE}</span>
							</a>
						</li>
						<!-- IF U_USER_PROFILE -->
							<li>
								<a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">
									<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>{L_READ_PROFILE}</span>
								</a>
							</li>
						<!-- ENDIF -->

						<!-- EVENT navbar_header_profile_list_after -->

						<li class="separator"></li>
						<li>
							<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- EVENT navbar_header_username_append -->
		</li>
		<!-- IF S_DISPLAY_PM -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_PRIVATEMSGS}" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>{L_PRIVATE_MESSAGES} </span><strong class="badge<!-- IF not PRIVATE_MESSAGE_COUNT --> hidden<!-- ENDIF -->">{PRIVATE_MESSAGE_COUNT}</strong>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF S_NOTIFICATIONS_DISPLAY -->
			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
				</a>
				<!-- INCLUDE notification_dropdown.html -->
			</li>
		<!-- ENDIF -->
		<!-- EVENT navbar_header_user_profile_append -->
	<!-- ELSE -->
		<li class="rightside"  data-skip-responsive="true">
			<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
				<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
			</a>
		</li>
		<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_REGISTER}" role="menuitem">
					<i class="icon fa-pencil-square-o  fa-fw" aria-hidden="true"></i><span>{L_REGISTER}</span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- EVENT navbar_header_logged_out_content -->
	<!-- ENDIF -->
	</ul>



	</div>
</div>

[Gumboots]

In that case, just set the width on the .inner div. I don't think that has anything set by default, so there shouldn't be any conflicts.

[Mannix_]

show us your overall_header.html file

[yusufdj]

show us your overall_header.html file

overal_header.html file;

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF --><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF -->{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --></title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{{ path('phpbb_feed_index') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{{ path('phpbb_feed_news') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{{ path('phpbb_feed_forums') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{{ path('phpbb_feed_topics') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{{ path('phpbb_feed_topics_active') }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{{ path('phpbb_feed_forum', { forum_id : S_FORUM_ID } ) }}"><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{{ path('phpbb_feed_topic', { topic_id : S_TOPIC_ID } ) }}"><!-- ENDIF -->
	<!-- EVENT overall_header_feeds -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" href="{U_CANONICAL}">
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<!-- IF S_ALLOW_CDN -->
<script>
	WebFontConfig = {
		google: {
			families: ['Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese']
		}
	};

	(function(d) {
		var wf = d.createElement('script'), s = d.scripts[0];
		wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
		wf.async = true;
		s.parentNode.insertBefore(wf, s);
	})(document);
</script>
<!-- ENDIF -->
<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!-- IF S_COOKIE_NOTICE -->
	<link href="{T_ASSETS_PATH}/cookieconsent/cookieconsent.min.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">
<![endif]-->

<!-- EVENT overall_header_head_append -->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

</head>
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

<!-- EVENT overall_header_body_before -->
<div id="page-header">
		<div class="headerbar" role="banner">
		<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

<div id="wrap" class="wrap">
	<a id="top" class="top-anchor" accesskey="t"></a>
	

	<!-- EVENT overall_header_page_body_before -->

	<a id="start_here" class="anchor"></a>
	<div id="page-body" class="page-body" role="main">
		<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div id="information" class="rules">
			<div class="inner">
				<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT overall_header_content_before -->

[Mannix_]

put the <!-- INCLUDE navbar_header.html --> below <a id="top" class="top-anchor" accesskey="t"></a> btw your whole header is outside the wrap. Don't forget to purge the cache to see changes

[Talk19Zehn]

? If I understand it correctly, the breadcrumbs should be included. Is that interpreted correctly?

[yusufdj]

? If I understand it correctly, the breadcrumbs should be included. Is that interpreted correctly?

Yes, the width will remain the same, the content will be at the level of wrap.

[Talk19Zehn]

Okay, examples (!!!) prosilver: phpBB-3.2.8 (!!!!)
Note: play with max-width: 1366px; inside --> .navbar here 1366px as an example

CSS:

Code: Select all

.bodymyfirstnavbar {
	color: #FAFAFA;
	background-color: #4075D8;
}

.navbarmypad {
	margin: 0px auto;
	color: #FFFFFF;
}

.navbar a:link		{ color: #FAFAFA; }
.navbar a:visited	{ color: #FAFAFA; }
.navbar a:hover		{ color: #FAFAFA; }
.navbar a:active	{ color: #FAFAFA; }

.navbar {
	background-color: #000000;
	filter: none;
	box-shadow: 1px 1px 8px 4px #9597A8;
	max-width: 1366px;
	width: auto;
	color: #FFFFFF;
}

ul.navlinks {
	border-top-color: transparent;
}

HTML: overall_header.html
find:
<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

add after:

Code: Select all

	<!-- EVENT overall_header_body_before -->
	<div class="bodymyfirstnavbar">
		<a id="top" class="top-anchor" accesskey="t"></a>
		<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
		<!-- EVENT overall_header_navbar_before -->
		<div class="navbar navbarmypad" 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<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
							<a href="#" class="dropdown-trigger">
								<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>{L_QUICK_LINKS}</span>
							</a>
							<div class="dropdown">
								<div class="pointer"><div class="pointer-inner"></div></div>
								<ul class="dropdown-contents" role="menu">
									<!-- EVENT navbar_header_quick_links_before -->

									<!-- IF S_DISPLAY_SEARCH -->
										<li class="separator"></li>
										<!-- IF S_REGISTERED_USER -->
											<li>
												<a href="{U_SEARCH_SELF}" role="menuitem">
													<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_SELF}</span>
												</a>
											</li>
										<!-- ENDIF -->
										<!-- IF S_USER_LOGGED_IN -->
											<li>
												<a href="{U_SEARCH_NEW}" role="menuitem">
													<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_NEW}</span>
												</a>
											</li>
										<!-- ENDIF -->
										<!-- IF S_LOAD_UNREADS -->
											<li>
												<a href="{U_SEARCH_UNREAD}" role="menuitem">
													<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_UNREAD}</span>
												</a>
											</li>
										<!-- ENDIF -->
											<li>
												<a href="{U_SEARCH_UNANSWERED}" role="menuitem">
													<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_UNANSWERED}</span>
												</a>
											</li>
											<li>
												<a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">
													<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>{L_SEARCH_ACTIVE_TOPICS}</span>
												</a>
											</li>
											<li class="separator"></li>
											<li>
												<a href="{U_SEARCH}" role="menuitem">
													<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
												</a>
											</li>
									<!-- ENDIF -->

									<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
										<li class="separator"></li>
										<!-- IF S_DISPLAY_MEMBERLIST -->
											<li>
												<a href="{U_MEMBERLIST}" role="menuitem">
													<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>{L_MEMBERLIST}</span>
												</a>
											</li>
										<!-- ENDIF -->
										<!-- IF U_TEAM -->
											<li>
												<a href="{U_TEAM}" role="menuitem">
													<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>{L_THE_TEAM}</span>
												</a>
											</li>
										<!-- ENDIF -->
									<!-- ENDIF -->
									<li class="separator"></li>

									<!-- EVENT navbar_header_quick_links_after -->
								</ul>
							</div>
						</li>

					<!-- EVENT overall_header_navigation_prepend -->
					<li <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->>
						<a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
							<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
						</a>
					</li>
						<!-- EVENT overall_header_navigation_append -->
						<!-- IF U_ACP -->
							<li data-last-responsive="true">
								<a href="{U_ACP}" title="{L_ACP}" role="menuitem">
									<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>{L_ACP_SHORT}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF U_MCP -->
							<li data-last-responsive="true">
								<a href="{U_MCP}" title="{L_MCP}" role="menuitem">
									<i class="icon fa-gavel fa-fw" aria-hidden="true"></i><span>{L_MCP_SHORT}</span>
								</a>
							</li>
						<!-- ENDIF -->

					<!-- IF S_REGISTERED_USER -->
						<!-- EVENT navbar_header_user_profile_prepend -->
						<li id="username_logged_in" class="rightside <!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
							<!-- EVENT navbar_header_username_prepend -->
							<div class="header-profile dropdown-container">
								<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF --> {CURRENT_USERNAME_SIMPLE}</a>
								<div class="dropdown">
									<div class="pointer"><div class="pointer-inner"></div></div>
									<ul class="dropdown-contents" role="menu">
										<!-- IF U_RESTORE_PERMISSIONS -->
											<li>
												<a href="{U_RESTORE_PERMISSIONS}">
													<i class="icon fa-refresh fa-fw" aria-hidden="true"></i><span>{L_RESTORE_PERMISSIONS}</span>
												</a>
											</li>
										<!-- ENDIF -->

									<!-- EVENT navbar_header_profile_list_before -->

										<li>
											<a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">
												<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>{L_PROFILE}</span>
											</a>
										</li>
										<!-- IF U_USER_PROFILE -->
										<li>
											<a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">
												<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>{L_READ_PROFILE}</span>
											</a>
										</li>
										<!-- ENDIF -->

										<!-- EVENT navbar_header_profile_list_after -->

										<li class="separator"></li>
										<li>
											<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
												<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
							<!-- EVENT navbar_header_username_append -->
						</li>
						<!-- IF S_DISPLAY_PM -->
							<li class="rightside" data-skip-responsive="true">
								<a href="{U_PRIVATEMSGS}" role="menuitem">
									<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>{L_PRIVATE_MESSAGES} </span><strong class="badge<!-- IF not PRIVATE_MESSAGE_COUNT --> hidden<!-- ENDIF -->">{PRIVATE_MESSAGE_COUNT}</strong>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF S_NOTIFICATIONS_DISPLAY -->
							<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
								<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
									<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
								</a>
								<!-- INCLUDE notification_dropdown.html -->
							</li>
						<!-- ENDIF -->
						<!-- EVENT navbar_header_user_profile_append -->
					<!-- ELSE -->
						<li class="rightside"  data-skip-responsive="true">
							<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
							</a>
						</li>
						<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
							<li class="rightside" data-skip-responsive="true">
								<a href="{U_REGISTER}" role="menuitem">
									<i class="icon fa-pencil-square-o fa-fw" aria-hidden="true"></i><span>{L_REGISTER}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- EVENT navbar_header_logged_out_content -->
					<!-- ENDIF -->
				</ul>
			</div>
		</div>
	</div>
<div style="clear: both"></div>

navbar_header.html (included) looks like ....

Code: Select all

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

	<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
		<!-- DEFINE $MICRODATA = ' itemtype="http://schema.org/ListItem" itemprop="itemListElement" itemscope' -->
		{% set navlink_position = 1 %}
		<!-- EVENT overall_header_breadcrumbs_before -->
		<li class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
			<!-- IF U_SITE_HOME -->
				<span class="crumb" {$MICRODATA}><a href="{U_SITE_HOME}" itemtype="https://schema.org/Thing" itemprop="item" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="name">{L_SITE_HOME}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
			<!-- ENDIF -->
			<!-- EVENT overall_header_breadcrumb_prepend -->
				<span class="crumb" {$MICRODATA}><a href="{U_INDEX}" itemtype="https://schema.org/Thing" itemprop="item" accesskey="h" data-navbar-reference="index"><!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw"></i><!-- ENDIF --><span itemprop="name">{L_INDEX}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>

			<!-- BEGIN navlinks -->
				<!-- EVENT overall_header_navlink_prepend -->
				<span class="crumb" {$MICRODATA}<!-- IF navlinks.MICRODATA --> {navlinks.MICRODATA}<!-- ENDIF -->><a href="{navlinks.U_VIEW_FORUM}" itemtype="https://schema.org/Thing" itemprop="item"><span itemprop="name">{navlinks.FORUM_NAME}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
				<!-- EVENT overall_header_navlink_append -->
			<!-- END navlinks -->
			<!-- EVENT overall_header_breadcrumb_append -->
		</li>
		<!-- EVENT overall_header_breadcrumbs_after -->

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<li class="rightside responsive-search">
				<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" role="menuitem">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
				</a>
			</li>
		<!-- ENDIF -->
	</ul>

	</div>
</div>

Best regards as a first aid ... and you can also play with the colors within the navbar - just try it out


Edit:
UUuups: It means: play with --> max-width: 1366px;

[Mick]

Original prosilver theme

That style looks like SE not prosilver, from what I remember SE was fixed width & prosilver wasn’t, is that still the case?