Move button to nav bar (WP menu) WordPress
- SOLVED
Hello,
Would like a button [shortcode] moved to the navigation area to save space.
See screenshot: http://screencast.com/t/9q3MpCxUhX
header.php
<div class="wrapper">
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<?php woo_header_inside(); ?>
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php if ( is_woocommerce_activated() && isset( $woo_options['woocommerce_header_cart_link'] ) && 'true' == $woo_options['woocommerce_header_cart_link'] ) { ?>
<nav class="nav cart">
<?php woo_cart_link(); ?>
</nav>
<?php } ?>
<span class="nav-toggle"><a href="#navigation"><span><?php _e( 'Navigation', 'woothemes' ); ?></span></a></span>
</hgroup>
<?php woo_nav_before(); ?>
<!-- custom widget -->
<div align="right"><?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("above-nav") ) : endif; ?></div>
</header><!-- /#header -->
</div><!--/.wrapper-->
<nav id="navigation" class="col-full" role="navigation">
<div class="main-nav-inner">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
<?php woo_nav_after(); ?>
</div><!--/.main-nav-inner-->
</nav><!-- /#navigation -->
<?php woo_content_before(); ?>
Theme called Peddlar from WooThemes. Added a custom widget area for the button shortcode. If you have a better idea, please let me know. Thank you.
Answers (4)
Giri answers:
Try this code
<div class="wrapper">
<?php woo_header_before(); ?>
<header id="header" class="col-full">
<?php woo_header_inside(); ?>
<hgroup>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php if ( is_woocommerce_activated() && isset( $woo_options['woocommerce_header_cart_link'] ) && 'true' == $woo_options['woocommerce_header_cart_link'] ) { ?>
<nav class="nav cart">
<?php woo_cart_link(); ?>
</nav>
<?php } ?>
<span class="nav-toggle"><a href="#navigation"><span><?php _e( 'Navigation', 'woothemes' ); ?></span></a></span>
</hgroup>
<?php woo_nav_before(); ?>
<!-- custom widget -->
</header><!-- /#header -->
</div><!--/.wrapper-->
<nav id="navigation" class="col-full" role="navigation">
<div class="main-nav-inner">
<?php
if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav">
<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
</ul><!-- /#nav -->
<?php } ?>
<div align="right"><?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("above-nav") ) : endif; ?></div>
<?php woo_nav_after(); ?>
</div><!--/.main-nav-inner-->
</nav><!-- /#navigation -->
<?php woo_content_before(); ?>
Creativira comments:
Good work, Giri. Almost there with your code: http://screencast.com/t/PxEccR1A
Just need the button to look like it does on the first screenshot. Thank you.
Creativira comments:
http://cabinethaus.viracreativesolutions.com/preview$
Giri comments:
Use it in your custom.css file
.main-nav-inner .textwidget a.button {
background: #ae7f3b;
}
.main-nav-inner .textwidget a.button:hover {
background: #9b7135;
}
.main-nav-inner .textwidget a.button {
display: inline-block;
padding: .875em 1.416em;
color: white;
text-align: center;
text-decoration: none;
font-size: 1em;
font-family: inherit;
cursor: pointer;
overflow: visible;
width: auto;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
font-weight: bold;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "lato", sans-serif;
text-shadow: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #77cb6d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.main-nav-inner .textwidget a.button {
color: white;
text-align: center;
font-size: 1em;
font-family: inherit;
cursor: pointer;
line-height: 1;
white-space: nowrap;
font-weight: bold;
font-family: "lato", sans-serif;
text-shadow: none;
}
Giri comments:
Also add this code too..
.main-nav-inner .textwidget a.button {
margin-top: 10px;
}
Giri comments:
Please note: you have to edit
cabinethaus/custom.css
Also note.. you should add those codes at the bottom of that file
Creativira comments:
Added; no change.
Giri comments:
Sorry little change. I used wrong class name
Try this code
.main-nav-inner .textwidget a.woo-sc-button {
background: #ae7f3b;
}
.main-nav-inner .textwidget a.woo-sc-button:hover {
background: #9b7135;
}
.main-nav-inner .textwidget a.woo-sc-button {
display: inline-block;
padding: .875em 1.416em;
color: white;
text-align: center;
text-decoration: none;
font-size: 1em;
font-family: inherit;
cursor: pointer;
overflow: visible;
width: auto;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
font-weight: bold;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "lato", sans-serif;
text-shadow: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #77cb6d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.main-nav-inner .textwidget a.woo-sc-button {
color: white;
text-align: center;
font-size: 1em;
font-family: inherit;
cursor: pointer;
line-height: 1;
white-space: nowrap;
font-weight: bold;
font-family: "lato", sans-serif;
text-shadow: none;
}
.main-nav-inner .textwidget a.woo-sc-button {
margin-top: 10px;
border-radius:0px;
}
Creativira comments:
Giri: nice try but isp_charlie got the vote for the css.
Creativira comments:
Next:
1. hide the quote button when on the 'request-a-quote' page.
2. the quote button shows below the nav on mobile screen.
will add 10 more vote$.
Creativira comments:
Should I create a new question or add votes to this one?
Giri comments:
To hide button
.page-id-71 #navigation .woo-sc-button {
display:none;
}
Giri comments:
Yeah just add votes to this one..
@media(max-width:768px) {
#navigation .textwidget {
text-align:left;
}
}
Giri comments:
So the final code will be
.page-id-71 #navigation .woo-sc-button {
display:none;
}
@media(max-width:768px) {
#navigation .textwidget {
text-align:left;
}
}
Creativira comments:
Thanks Giri. You and Charlie both have votes on this one :)
You were first to get the hide button on page-id-71 and Charlie provided code that kept the nav visible and your code aligned button left.
isp_charlie answers:
please show your link.
isp_charlie comments:
file brown.css line 181 add "#navigation .woo-sc-button" before like bellow:
#navigation .woo-sc-button,
#header .cart-contents:before,
a.button,
#commentform #submit,
.submit,
.added_to_cart,
input[type=submit],
input.button,
button.button,
.wrapper .woo-sc-button {
background: #ae7f3b;
}
file style.css line 2929 add "#navigation .woo-sc-button" before like bellow
a.button,
#commentform #submit,
.submit,
.added_to_cart,
input[type=submit],
input.button,
button.button,
.wrapper .woo-sc-button,
.slide-content .woo-sc-button,
#navigation .woo-sc-button {
also line 2987 add "#navigation .woo-sc-button:hover," before.
Creativira comments:
isp_charlie: I am using a child theme--custom.css
isp_charlie comments:
put this to custom.css
#navigation .woo-sc-button {
display: inline-block;
padding: .875em 1.416em;
color: white;
text-align: center;
text-decoration: none;
font-size: 1em;
/* Make inputs the same size as normal text */
font-family: inherit;
/* Make inputs use the correct typeface instead of the browser default */
cursor: pointer;
/* Inputs need pointers! */
overflow: visible;
width: auto;
/* IE fix */
line-height: 1;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
white-space: nowrap;
font-weight: bold;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
font-family: "lato", sans-serif;
text-shadow: none;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #77cb6d;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
background: #ae7f3b;
}
#navigation .woo-sc-button:hover {
background: #66ba5c;
color: #fff;
text-decoration: none !important;
}
Creativira comments:
Good work Charlie. You have the vote for this one.
Creativira comments:
p.s. to be clear, partial vote for css assistance.
isp_charlie comments:
try this :)
.page-id-71 #navigation .woo-sc-button {
display:none;
}
@media(max-width:768px) {
#navigation {
display: block!important;
}
#navigation .main-nav {
display: none;
text-align:left;
}
#navigation .right {
clear: both;
margin-top: 10px;
}
#navigation[style="display: block;"] .main-nav {
display: block!important;
}
#navigation[style="display: none;"] .main-nav {
display: none!important;
}
}
isp_charlie comments:
oh sorry, try this again
@media(max-width:768px) {
#navigation {
display: block!important;
}
#navigation #main-nav {
display: none;
text-align:left;
}
#navigation .right {
clear: both;
margin-top: 10px;
}
#navigation[style="display: block;"] #main-nav {
display: block!important;
}
#navigation[style="display: none;"] #main-nav {
display: none!important;
}
}
Creativira comments:
Thank you Charlie :) it's a split for you and Giri on this one.
One last request: how to style the Gravity Forms button to look like the one you helped with earlier.
Creativira comments:
That's what I was looking for!
Couple of things:
1. align button center
2. menu should open upon clicking :)
Creativira comments:
re: align button: center; done.
two things left:
1. nav open upon click/touch
2. Gravity Forms button to look like theme button
isp_charlie comments:
update media css again
@media(max-width:768px) {
#navigation {
display: block!important;
}
#navigation #main-nav {
display: none;
text-align:left;
}
#navigation .textwidget {
text-align: center;
}
#navigation .right {
clear: both;
margin-top: 10px;
}
}
//find header.php
<span class="nav-toggle"><a href="#navigation"><span> change to <span class="nav-toggle"><a href="#main-nav"><span>
Creativira comments:
Nav same behavior after updating to above on mobile. On desktop is visible again :)
isp_charlie comments:
now begins complex, can send me informations i'll fix for you ?
Creativira comments:
fyi button for the Gravity Form is not right only on the mobile screen.
Creativira comments:
admin, ftp or both?
isp_charlie comments:
only ftp, by email : [email protected]
Arnav Joy answers:
can you show your site link?
Creativira comments:
http://cabinethaus.viracreativesolutions.com/preview$
Hariprasad Vijayan answers:
Hello,
Just use following code for button.
echo do_shortcode('[shortcode]');
No need of custom widget area.