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>
Related
I have an old website I had to copy over to Wordpress. I created a custom theme to achieve this. I have a custom navbar that I am pulling in a custom sidebar.php file. I am also hooking in the pages by page ID as you can see in my markup. I have not been able to dynamically add an active class to highlight on the navbar which page they are on. I have tried plenty of jQuery but to no avail. I am also linked in boostrap for responsiveness.
Any help would be appreciated!
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
The Battle & Beyond
<!-- navigation object : Menu - Left Navigation -->
<ul class="nav-bar">
<li>Map</li>
<li>The Ravine</li>
<li>Groggin's Field</li>
<li>Oldbridge Village</li>
<li>Battle Artillery</li>
<li>King William's Camp</li>
<li>King James's Camp</li>
<li>Crossing the Ford</li>
<li>The River Crossing</li>
<li>King William's Crossing</li>
<li>The Retreat</li>
</ul>
</li>
</ul>
</div>
The quickest way to do this (but not the recommended "WordPress" way of doing this) is to add an if statement on your <li> or <a> tags to check for the current page ID like this:
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
The Battle & Beyond
<!-- navigation object : Menu - Left Navigation -->
<ul class="nav-bar">
<li <?= (is_page(204)) ? 'class="active"' : ''; ?>>Map</li>
<li <?= (is_page(212)) ? 'class="active"' : ''; ?>>The Ravine</li>
<li <?= (is_page(215)) ? 'class="active"' : ''; ?>>Groggin's Field</li>
<li <?= (is_page(218)) ? 'class="active"' : ''; ?>>Oldbridge Village</li>
<li <?= (is_page(220)) ? 'class="active"' : ''; ?>>Battle Artillery</li>
<li <?= (is_page(224)) ? 'class="active"' : ''; ?>>King William's Camp</li>
<li <?= (is_page(226)) ? 'class="active"' : ''; ?>>King James's Camp</li>
<li <?= (is_page(228)) ? 'class="active"' : ''; ?>>Crossing the Ford</li>
<li <?= (is_page(233)) ? 'class="active"' : ''; ?>>The River Crossing</li>
<li <?= (is_page(235)) ? 'class="active"' : ''; ?>>King William's Crossing</li>
<li <?= (is_page(237)) ? 'class="active"' : ''; ?>>The Retreat</li>
</ul>
</li>
</ul>
</div>
The "WordPress" way would be to register a new nav menu so that you can dynamically create a menu on the backend. When you do that, you can display the dynamic menu and WordPress will automatically add the active classes for you.
functions.php file
function register_my_custom_menu() {
register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );
sidebar.php file:
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
The Battle & Beyond
<!-- navigation object : Menu - Left Navigation -->
<?php wp_nav_menu( array(
'theme_location' => 'sidebar-menu',
'menu_class' => 'nav-bar'
)
); ?>
</li>
</ul>
</div>
Once you have this in place, login to your WordPress admin and go to Appearance > Menu's and you can build your menu there.
References:
https://codex.wordpress.org/Navigation_Menus
https://developer.wordpress.org/reference/functions/wp_nav_menu/
With the help of mread1208 above I found the most efficient solution.
The HTML for the sidebar.php (or sidebar-whateveryouwant.php) file.
Note: in the backend of Wordpress when building your menu tick the box 'Sidebar Menu' in Menu Settings below your menu structure.
<div id="leftnav">
<ul class="nav-bar">
<li>
<!-- Link to section at level 2 -->
The Battle & Beyond
<!-- navigation object : Menu - Left Navigation -->
<?php wp_nav_menu( array(
'theme_location' => 'sidebar-menu',
'menu_class' => 'nav-bar'
)
); ?>
</li>
</ul>
Added to the functions.php file:
// Adds custom menu
function register_my_custom_menu() {
register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );
In your CSS target the active classes:
#leftnav ul li.current_page_item > a, #leftnav ul li.current_page_parent > a, #leftnav ul li.current-menu-ancestor > a, #leftnav ul li.current-menu-item > a, #leftnav ul li.current-menu-parent > a {
background-color: #ffc107;
border-color: 4em solid #ffc107;}
Hope that helps someone.
I want to add a picture above the footer as seen picture below, or you can visit the website: http://creativelab.twofour54.com/en/
Example of the photo from TwoFour54
The website I'm testing it on is wordpress. I tried playing with the footer.php however it works nicely but when I stretch the site (zoom out or in) It gets ruined. I tried to make it static with position tag from CSS but that didnt work.
<div class="cfa" style="margin-left: 200px; width: 100%; z-index: 10;">
<div class="container">
<div class="col-sm-12">
<img src="http://localhost:8080/TESTWORDPRESS/wp-content/uploads/2017/01/Sketch-Book-icon.png">
</div>
</div>
</div>
<?php
/*
Template for Footer
*/
?>
<footer id="footer">
<div class="row clearfix">
<?php
if ( ! dynamic_sidebar ( 'footer_widgets' ) ){
thdglkr_emptysidebar('Footer');
}
?>
</div><!-- row -->
<?php if (_option('footer_menu','1')=='1'){ ?>
<div class="footer-last row mtf clearfix">
<span class="copyright"><?php echo _option('footer_text'); ?></span>
<?php
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu' => 'Footer Menu',
'container' => 'div',
'container_class' => '' ,
'menu_class' => 'foot-menu',
)
);
}else{?>
<div class="footer-last row mtf clearfix center">
<span class="copyright center"><?php echo _option('footer_text'); ?></span>
<?php } ?>
</div><!-- end last footer -->
</footer><!-- end footer -->
</div><!-- end layout -->
</div><!-- end frame -->
<?php if (_option('footer_gototop')==1): ?>
<div id="toTop"><i class="icon-angle-up"></i></div><!-- Back to top -->
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>
note: code above is Footer.php from my test local host
Does anyone have any ideas?
Put your .cfa inside your footer in your html. And in your css:
.cfa {
position: absolute;
top: 0;
left: 200px;
margin-top: -100px; //change this to the height of your image
}
EDIT: Actually it's better if you can remove it from your HTML and just add it via css using a :before pseudo-element if you're using it just for design purposes.
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.
Building a Wordpress theme and I am not on the first page but on other pages content to have.
This is the site:
http://avocat.dac-proiect.ro
I turned off main site
.masthead-fixed .site-main {
margin-top: 48px;
display:none;
For example ... if a user clicks on "Sample Page" I want #.masthead-fixed to be activate else...not be displayed.
It can do so in CSS?
What technology can I use?
It would help me a strong example to understand more clearly what to do.
Thanks in advance!
Look at the generated HTML. Each page will have some unique classes on the body tag. For instance, the frontpage will have a .home class, and depending on template, your body tag will also have a template class, e.g. .page-template-default. Most importantly, though, is that each page will have a unique id, e.g. .page-id-7. You can easily use these to differentiate between specific pages in your CSS.
So look at the source code of your "Sample Page", find its id and adjust the CSS accordingly:
body.page-id-X .masthead-fixed .site-main {
display: none;
}
If you want something to show only when you're not on the home page you can use the following PHP in your template file.
<?php if (!is_home() || !is_front_page()) { ?>
<div id="something">This div and content will only show up if we're not on the front page</div>
<?php } ?>
So here's a standard masthead found in header.php
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="menu-label" onclick></label>
<nav id="site-navigation" class="main-navigation" role="off-canvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
Change the above code to this:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if (!is_home() || !is_front_page()) { ?> <!-- PLACE THIS LINE ABOVE YOUR HEADER -->
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="menu-label" onclick></label>
<nav id="site-navigation" class="main-navigation" role="off-canvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<?php } ?> <!-- PLACE THIS CODE AFTER THE HEADER -->
<div id="content" class="site-content">
This will display your header on all pages except your home page.
I need some help with positioning my css elements in a wordpress theme. Here is my situation.
First, I call my header. Inside my header is my horizontal nav menu.
Next, I call my slider from the index.php. The slider is created in such a way as it takes up 100% of my screen width with 0 margin-top. Doing this allows my menu to be within my slider images.
My problem is that the next element I call is place directly under my menu, but I would like it placed under my slider images. How do I do this? Do I have to give my next element a margin-top equal to the height of my slider images? Seems there is probably a better way to do this.
The slider is only used on the index page, not on any of the sub pages.
I'm thinking maybe the right answer has something to do with the position tag but I'm not having any luck getting the functionality to work.
Here is the css for my slider positioning.
.slider {
position: absolute;
top: 0px;
width: 100%;
z-index: 1500;
}
Here is my index.php file
<?php get_header();?>
<section>
<?php get_template_part('slider', 'index');?>
</section>
<section>
<div class="row">
test
</div>
</section>
<?php get_sidebar();?>
<?php get_footer();?>
Here is my header
<body>
<header>
<section>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><?php bloginfo('name');?></h1></li><li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<?php wp_nav_menu( array( 'main-menu' => 'Main Menu', 'container' => false, 'walker' => new Top_Bar_Walker(), 'menu_class' => 'right'));?>
</section>
</nav>
</div>
</section>
</header>
And here is my slider-index.php file
<div class="row full-width slider">
<div class="preloader"></div>
<ul class="example-orbit" data-orbit data-options="timer_speed: 6000; slide_number: false; pause_on_hover: false; animation:fade;">
<?php
$args = array('category_name' => 'Featured');
$query = new WP_Query($args);
while($query->have_posts()) : $query->the_post();
?>
<li><?php the_post_thumbnail('featured');?>
<div id="<?php echo get_post_meta($post->ID, 'caption', true);?>" class="orbit-caption"><?php the_excerpt();?></div>
</li>
<?php
endwhile;
?>
</ul>
<div class="row shadow"><img src="<?php bloginfo('template_url');?>/img/bottom-shadow.png"></div>
</div>
Thanks for any help.