How can I position div container above the navigation in responsive??

Kass · January 29, 2017

Hello,

I've been learning to code (to use PW) for about a month. I am using PW + Bootstrap 4, with Mean-Menu, as per the compiled version below:

I wanted to display the website's languages in its own fluid container above the navigation. It worked on desktop view, as I simply put the code above the main navigation code in the body of _main.php.

The problem: when the website goes responsive, and when the Mean-Menu appears, the fluid container for the languages appears below the Mean-Menu navigation instead of above it.

Here is my code for the languages container:

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-lang">
                    <!-- language navigation -->
                        <ul class='languages'><?php
                            foreach($languages as $language) {
                                if(!$page->viewable($language)) continue; // is page viewable in this language?
                                if($language->id == $user->language->id) {
                                    echo "<li class='current'>";
                                } else {
                                    echo "<li>";
                                }
                                $url = $page->localUrl($language);
                                $hreflang = $homepage->getLanguageValue($language, 'name');
                                echo "<a hreflang='$hreflang' href='$url'>$language->title</a></li>";    
                            }                                
                        ?></ul>
                    <!-- language navigation -->
           </div>
       </div>
</div>

I'd be highly grateful if someone could offer a solution.

Kass

rick · January 30, 2017

Hello Kass, and welcome to the group.

Can you also post the section that includes your mean menu. It is difficult to tell where any issue is with this code segment, as the only class designation is when the viewport is x-small.

Kass · January 30, 2017

Hello Rick,

Thank you for your response. Yes, here it is below

<!--Mobile Menu-->
<header id="mobile-menu" class="hidden-sm-up">
    <nav id="mobile-menu" class="hidden-sm-up">
        <a class='navbar-brand navbar-brand-mobile hidden-md-up' href='<?php echo $homepage->url; ?>'>Pwbs4</a>
        <?php
        $pa = $homepage->children;
        $pa = $pa->prepend($homepage);
        echo renderMobileNavbar($pa);
        ?>
    </nav>
</header>
<!--/#mobile-menu-->

Here is the script line:

    <script src="<?php echo $config->urls->templates; ?>assets/js/jquery.meanmenu.min.js">

I have not altered the meanmenu.css file . Here is the beginning of the css file:

a.meanmenu-reveal {
    display: none;
}

/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar {
    float: left;
    width: 100%;
    position: relative;
    background: #0c1923;
    padding: 4px 0;
    min-height: 42px;
    z-index: 999999;
}

.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 13px 13px 11px 13px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.mean-container a.meanmenu-reveal span {
    display: block;
    background: #fff;
    height: 3px;
    margin-top: 3px;
}

.mean-container .mean-nav {
    float: left;
    width: 100%;
    background: #0c1923;
    margin-top: 44px;
}

.mean-container .mean-nav ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}

Edited January 30, 2017 by kongondo
Mod Note: Please be wrapping code around code blocks (see the <> icon), thanks.

flydev · January 30, 2017

Hello @Kass and welcome to the forum !

Your issue is easy to solve.

11 hours ago, Kass said:

I simply put the code above the main navigation code in the body of _main.php.

So just after your div/container, add another div, for example :

<div id="meanmenu-container"></div>

after that - I am sorry I included the minified version of meanmenu - edit jquery.meanmenu.min.js and seek the property meanMenuContainer then add as value our new div: '#meanmenu-container'

[...]

meanMenuContainer: '#meanmenu-container', // Choose where meanmenu will be placed within the HTML
  
[...]

Now the languages bar should be above of the responsive menu

(thanks Kongondo)

Edited January 30, 2017 by flydev
screenshot

Kass · January 30, 2017

Hello @flydev. Thank you very much indeed!

Your solution worked perfectly when I loaded it on Firefox, but there is an issue with Chrome:

On Chrome inspect, the responsive menu appears under the div class 'mean-bar', instead of in the 'meanmenu-container' like on Firefox, and consequently the languages are displayed below the nav instead of above

Kass

flydev · January 31, 2017

Look like I cant reproduce it. Could you make a screenshot ?

Did you added some CSS style for the languages bar ?

I just tested in chrome and the languages are still displayed above the meanmenu:

Just in case, there is the full _main.php :

Spoiler


<?php

/**
 * This is the main markup file containing the container HTML that all pages are output in.
 *
 * The primary focus of this file is to output these variables (defined in _init.php) in the 
 * appropriate places:
 *
 * $headline - Text that goes in the primary <h1> headline
 * $browserTitle - The contents of the <title> tag
 * $body - Content that appears in the bodycopy area
 * $side - Additional content that appears in the sidebar
 *
 * Note: if a variable called $useMain is set to false, then _main.php does nothing.
 *
 */

// if any templates set $useMain to false, abort displaying this file
// an example of when you'd want to do this would be XML sitemap or AJAX page.
if(!$useMain || $config->ajax) return;
/**********************************************************************************************/
?><!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title><?php echo $browserTitle; ?></title>

	<?php if($page->summary) echo "<meta name='description' content=\"{$page->summary}\" />"; ?>
	<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
	<link href="<?php echo $config->urls->templates; ?>assets/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
	<link href="<?php echo $config->urls->templates; ?>assets/css/tether.min.css" media="all" rel="stylesheet" type="text/css" />
	<link href="<?php echo $config->urls->templates; ?>assets/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css" />
	<link href="<?php echo $config->urls->templates; ?>assets/css/meanmenu.min.css" media="all" rel="stylesheet" type="text/css" />
    <link href="<?php echo $config->urls->templates; ?>assets/css/main.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body class='<?php echo "template-{$page->template} section-{$page->rootParent->name} page-$page"; ?>'>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 col-lang">
			<!-- language navigation -->
			<ul class='languages' style="float: right"><?php
				foreach($languages as $language) {
					if(!$page->viewable($language)) continue; // is page viewable in this language?
					if($language->id == $user->language->id) {
						echo "<li class='current'>";
					} else {
						echo "<li>";
					}
					$url = $page->localUrl($language);
					$hreflang = $homepage->getLanguageValue($language, 'name');
					echo "<a hreflang='$hreflang' href='$url'>$language->title</a></li>";
				}
				?></ul>
			<!-- language navigation -->
		</div>
	</div>
</div>

<div id="meanmenu-container"></div>

<!--Mobile Menu-->
<header id="mobile-menu" class="hidden-sm-up" style="position:relative;">

	<nav>
		<a class='navbar-brand navbar-brand-mobile hidden-md-up' href='<?php echo $homepage->url; ?>'>Pwbs4</a>
		<?php
		$pa = $homepage->children;
		$pa = $pa->prepend($homepage);
		echo renderMobileNavbar($pa);
		?>
	</nav>
</header>
<!--/#mobile-menu-->

<!--navbar-->
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse hidden-sm-down" style="position:relative;">
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<a class="navbar-brand hidden-xs-down" href="<?php echo $homepage->url ?>">Pwbs4</a>

				<?php
				$pa = $homepage->children;
				$pa = $pa->prepend($homepage);
				echo renderChildrenOf($pa);
				?>

				<!-- search form -->
				<form class="search form-inline pull-xs-right" action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
					<input class="form-control" data-toggle="tooltip" data-placement="bottom" title="Search the site" type="text" name="q" placeholder="Search" value="<?php echo $sanitizer->entities($input->whitelist('q')); ?>" />
				</form>
			</div>
		</div>
	</div>
</nav>
<!--/navbar-->


	<!-- breadcrumbs -->
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<ol class="breadcrumb bg-faded home m-t-1">
					<?php
					foreach($page->parents() as $item) {
						echo "<li><a href='$item->url'>$item->title</a></li> ";
					}
					// optionally output the current page as the last item
					echo "<li>$page->title</li> ";
					?>
				</ol>
			</div>
		</div>
	</div>
    <!--/breadcrumbs-->

	<!-- content -->
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<?php echo $content; ?>
			</div>
		</div>
	</div>
    <!--/content-->

	<!--footer-->
	<div class="container">
		<div class="row">
            <div class="col-xs-12">
                <footer class="footer m-t-3">
                    <p>© <?php echo date('Y'); ?> pwbs4   /   Powered by <a href='http://processwire.com'>ProcessWire CMS</a></p>
                </footer>
            </div>
		</div>
	</div>
	<!--/footer-->


	<script type="text/javascript">
	if (typeof jQuery == 'undefined') {
	    document.write(unescape("%3Cscript src='<?php echo $config->urls->templates; ?>assets/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>
	<script src="<?php echo $config->urls->templates; ?>assets/js/tether.min.js"></script>
	<script src="<?php echo $config->urls->templates; ?>assets/js/bootstrap.min.js"></script>
	<script src="<?php echo $config->urls->templates; ?>assets/js/jquery.meanmenu.min.js"></script>
	<script src="<?php echo $config->urls->templates; ?>assets/js/scripts.js"></script>
	<?php foreach($config->scripts as $url) echo "<script src='$url'></script>"; ?>
</body>
</html>

Kass · February 3, 2017

Solved.

I checked using your php above, and it turned out that the issue was with my browser cache and not the code.

Thanks @flydev !

Sign In

How can I position div container above the navigation in responsive??

Recommended Posts

Kass

Link to comment

Share on other sites

rick

Link to comment

Share on other sites

Kass

Link to comment

Share on other sites

flydev

Link to comment

Share on other sites

Kass

Link to comment

Share on other sites

flydev

Link to comment

Share on other sites

Kass

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details