I'm using bootstrap to create my page templates for a wordpress site but I am having trouble getting my dropdown nav to work when I add a child in the wordpress menu screen.
Here is my header code...
<body id="grad1">
<div class="mynavbar">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-1">
<img src="/wp-content/uploads/2015/07/logo_80px.png" class=" center-block space" alt="Enter OmniMark here"/>
</div>
<div class="col-md-6 col-sm-6 col-xs-0">
</div>
<div class="col-md-3 col-sm-3 col-xs-1">
<img src="/wp-content/uploads/2015/07/OMsemicircle.png" class=" center-block space" alt="Enter OmniMark here"/>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="container-fluid" id="fontfix">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="center-block">
<div class="collapse navbar-collapse column " id="navbar-collapse-2">
<ul class="nav navbar-nav">
<!--<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
<li>News</li>
<li>Contact</li>-->
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'menu 1',
'depth' => 0,
'container' => false,
'container_class' => 'collapse navbar-collapse column',
'container_id' => 'navbar-collapse-2',
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
<!--Used to list nav and exclude pages-->
<!--<?php wp_list_pages(array('title_li' => '', 'exclude' => '615, 14',)); ?>-->
<li>Store</li>
</ul>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="module top widewrapper center-block">
<h1><span class="fontgreen">Thin Film</span><span class="fontblue"> Product Markings</span></h1>
<p class="darktext">The world is full of products and brands whose image gets lost in the white noise of modern society. The Lauterbach Group protects your brand’s unique and inspiring image with film product markings. Thin film product markings provide exceptional decoration options, increased production efficiencies and supply chain savings with an environmental focus.</p>
<!--<img class="center-block" src="/wp-content/uploads/2015/07/homepage_800.png" alt="" />-->
</div>
<div class="container mainbump">
I can also provide the functions code if that will help...
<?php
//trying to register menu
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
// Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
//menu registery
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'sidebar',
'id' => 'sidebar',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'footer',
'id' => 'footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'sidebarmenu',
'id' => 'sidebarmenu',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
The 'depth' value in the array is 0, you should change it to 2 or 3 if you want more.
Here's my example for the Wordpress wp_bootstraap_navkwalker() function.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--end navbar-header-->
<div class="collapse navbar-collapse menu-primary" id="bs-example-navbar-collapse-1">
<?php
wp_nav_menu( array(
'menu' => '',
'theme_location' => 'primary',
'depth' => 3,
'container' => '',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div><!--end navbar-colapse-->
</div><!--end container-->
</nav>
Try that and you should be good.
Related
I have this website and my problem is with the language switcher on top.
As you can see from the screenshots, when the width is between 768 - 990 px the top bar disappears.
With top bar at 1175px x 621px
Without top bar at 896px x 489px
I have tried many css tricks that i found online, like
-webkit-transform: translate3d(0, 0, 0);
but i still have the same result
The HTML code is the menu from the website. I think the problem is being created by the class="style2"
P.S. At line 6315 of the css you can see the
#media (min-width: 768px) {...}
but i can't figure if something contributes to my problem.
<?php if((get_theme_mod('andaman_top_contact') || get_theme_mod('andaman_menu_soc')) == true) { ?>
<div class="header style2">
<div class="top_bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-9 col-sm-12 col-xs-12">
<?php if(get_theme_mod('andaman_top_contact') == true) { ?>
<ul class="contacts-top">
<?php if(get_theme_mod('andaman_top_contact_address', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_address', '455 Martinson, Los Angeles')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_phone', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_phone', '+1 (043) 567-8930')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_hours', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_hours', 'Mon-Sut: 10 AM-8 PM')); ?></li><?php }; ?>
</ul>
<?php }; ?>
</div>
<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
<ul class="soc-top">
<?php if ( is_plugin_active( 'polylang/polylang.php' )) { ?>
<li class="lang"><span><img src="<?php echo get_stylesheet_directory_uri(). '/assets/images/lang-' . pll_current_language('slug') . '.png'; ?>" width="24" height="24" alt=""> <?php echo pll_current_language('name'); ?></span>
<ul class="lang-ul">
<?php $languages = pll_the_languages( array('raw'=> true, 'hide_if_no_translation'=>true, 'hide_current'=>true) );
foreach ($languages as $language ) {
echo '<li><img src="'.get_stylesheet_directory_uri(). '/assets/images/lang-'.$language['slug'].'.png" width="24" height="24" alt="'.$language['slug'].'">' .$language['name'].'</li>'; }; ?>
</ul>
</li>
<?php }; ?>
</ul>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="header style2 no-bar">
<?php };?>
<div class="sticky-menu">
<div class="container">
<div class="menu-flex">
<div class="logo">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">
<?php if(get_theme_mod('andaman_logo_upload', 'enable') == true) { ?>
<img src="<?php echo esc_url(get_theme_mod('andaman_logo_upload', get_template_directory_uri() . '/assets/images/logo.png')); ?>" alt="<?php the_title_attribute(); ?>" style="height: <?php echo esc_attr(get_theme_mod('andaman_logo_height', '45px')); ?>;">
<?php } else { ?>
<h1 style="margin:0;"><?php echo the_title(); ?></h1>
<?php } ?>
</a>
</div>
<?php if(get_theme_mod('andaman_menu_select', 'standard') == 'standard') { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'container' => false,
'menu_class' => 'nav navbar-nav',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'menu_class' => 'burger_andaman_main_menu',
'depth' => 3,
)); ?>
</div>
</div>
</div>
<?php } else { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'container' => false,
'menu_class' => 'nav navbar-nav share-class',
'menu_id' => 'menu-onepage',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'menu_class' => 'burger_andaman_main_menu share-class',
'menu_id' => 'menu-onepage',
'depth' => 1,
)); ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
This is happening because one of your stylesheet hiding the li.lang between mentioned width, I have provided you CSS, you can paste it inside the stylesheet.
#media screen and (max-width:990px){
li.search, li.lang {
display: block !important;
}
}
Screenshot of your CSS: (You have to change display: none to display: block)
Thank you #Gamers Agenda for your quick and accurate answer.
The changes I made with your help:
#media screen and (max-width:990px){
.soc-top {
float: right;
margin-right: 30px;
}
li.search, li.lang {
display: block !important;
}
}
This will do:
Your style:
#media (max-width: 767px)
.header.style2 .soc-top {
float: none !important;
text-align: center;
}
remove float: none !important; and be like:
#media (max-width: 767px)
.header.style2 .soc-top {
text-align: center;
}
So I've tried adding a phone number to the correct places on my site, but it's not styling correctly. The problem I'm running into is the mobile display. The logo will not center, and the phone number is not showing inline in the navbar.
What I'm trying to achieve:
desktop mobile
What I have:
http://lakeozarkelectrician.com/
CSS:
// -------------- Mobile -------------- //
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.img-fluid {
display: block;
margin: 0 auto;
}
a[href^="tel:"] {
color: white;
text-decoration: none;
float: none;
}
}
// ------------- Telephone Styling ------------ //
#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}
a[href^="tel:"] {
color: black;
text-decoration: none;
display: inline;
}
Header:
<body <?php body_class(); ?>>
<div class="hfeed site" id="page">
<!-- ******* Header ******* -->
<header>
<div class="wrapper-fluid">
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6 d-block hidden-md">
<div id="telephone">
<p>Call Now<br>
<i class="fa fa-phone"></i>
636-244-9045</p>
</div>
</div>
</div>
</div>
<!-- ******************* The Navbar Area ******************* -->
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
<span class="navbar-text d-inline-block d-sm-none">
<i class="fa fa-phone"></i>
636-244-9045
</span>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
</div>
</header>
</div>
You can try with this :
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
margin-left: auto; // <-- add this
margin-right: auto; // <-- add this
display: table; // <-- add this
}
#telephone{display:none;} // <-- add this
.navbar > .container + span{ // <-- add this
position: absolute; // <-- add this
right: 15px; // <-- add this
top: 10px; // <-- add this
} // <-- add this
}
sorry because i know that its old but may useful
u can false container like below and add what ever you want
<div id="navbarNavDropdown" class="collapse navbar-collapse"><?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?><span class="nav-item">MY NEW ITEM</span></div>
I'm making a purchase order system that exports the PO to PDF, but I need in the upper part to display data from buyer and also from seller.
I would like to have 2 DetailViews side by side, each one with a 50% of page width.
It is possible? So far I've not found any info regarding this and my CSS skills are low.
Thanks for any info.
You can unse bootstrap grid
In view you can palce the detailView in two separated bootstrap column
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelBuyer,
......
?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6" >
<?= DetailView::widget([
'model' => $modelSeller,
......
?>
</div>
in controller simply pass the two models in render
return $this->render('your_view', [
'modelBuyer' => $modelBuyer,
'modelSeller' => $modelSeller,
]);
I am using the kartik mpdf wrapper of mpdf. I noticed the kv-mpdf-bootstrap.min.css did not define "col-sm-6" as 50% the way it is in bootstrap.css. Since the documentation suggests that the mpdf css overides bootstrap I found the class "col-xs-5" which specifies 41.6666% which was suitable for my output requirements and allowed me to display two detailviews next to each other.
<form class="form-inline">
<div class="form-group">
<div class="col-xs-5">
<p><b>Bill To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
//'condensed'=>true,
//'striped' => false,
//'bordered' => true,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'billStreetAddress',
[
'attribute' => 'billStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'billCity',
'billPostalcode'
]
])
?>
</div>
</div>
<div class="col-xs-5" >
<p><b>Ship To</b></p>
<div style="border: 1px solid grey; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width:200px">
<?= DetailView::widget([
'model' => $model,
'bootstrap' => false,
'labelColOptions' => ['hidden' => true],
'attributes' => [
'company',
'shipStreetAddress',
[
'attribute' => 'shipStreetAddress2',
'visible' => (!empty($model->billStreetAddress2)),
],
'shipCity',
'shipPostalcode'
]
])
?>
</div>
</div>
</div>
This is the code that I have for my navigation [in a WordPress site].
<div class="sticky">
<nav class="top-bar" role="navigation" data-topbar>
<div class="top_bar_inner">
<a class="logo" href="<?php echo home_url(''); ?>"><?php bloginfo('name'); ?></a>
<?php
$args = array(
'theme_location' => 'nav_main',
'container_class' => 'top-bar-section',
'container_id' => 'nav_main',
'menu_class' => 'right',
'depth' => 1
);
wp_nav_menu($args);
?>
</div>
</nav>
</div>
Now the problem is due to the data-topbar attribute the top_bar_inner DIV class does not wrap the logo and resulting menu items generated by the php code. It only wraps the logo <a> tag.
I have also tried data-topbar="topbar" but no change. Please help.
Not sure what you are trying to accomplish. If you are trying to have content show on all screen sizes and not fold into the mobile menu, you can do this by adding it as an <li> in the title area
<ul class="title-area">
<li class="name"><!-- Leave this empty --></li>
...
</ul>
I am trying to modify the Drupal menu:page.tpl.php
<?php if ($main_menu): ?>
<div id="navigation-wrapper">
<div id="navigation">
<nav id="main-menu" role="navigation" tabindex="-1">
<?php
// This code snippet is hard to modify. We recommend turning off the
// "Main menu" on your sub-theme's settings form, deleting this PHP
// code block, and, instead, using the "Menu block" module.
// #see https://drupal.org/project/menu_block
print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</nav>
<?php print render($page['navigation']); ?>
</div>
</div>
<?php endif; ?>
And the css is:
#navigation-wrapper{
overflow:hidden;
width:100%
background:#ff6005;
}
#navigation{
width:950px;
margin:0 auto;
background:#ff6005;
}
#navigation ul li
{
display:inline;
padding:5px 10px 6px 10px;
}
But my output produces the background color only for the div navigation ! I was expecting a background color covering full width . Whats wrong with my CSS >
#navigation-wrapper{
overflow:hidden;
width:100%;
background:#ff6005;
You missed a ; after width.