Jump to content

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


Kass
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 by kongondo
Mod Note: Please be wrapping code around code blocks (see the <> icon), thanks.
Link to comment
Share on other sites

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 :)

 

pwbs4-languages.png

 

(thanks Kongondo)

Edited by flydev
screenshot
  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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:

 

pwbs4-languages-chrome.png

 

pwbs4-languages-console.png

 

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>

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...