I`m using a bootstrap theme for my wordpress site. Here is the navigation bar code from header.php.
<?php
// Collapsed navbar menu toggle
global $xsbf_theme_options;
$navbar = '<div class="navbar '.$xsbf_theme_options['navbar_classes'] . '">'
.'<div class="container">'
.'<div class="navbar-header">'
.'<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">'
.'<span class="icon-bar"></span>'
.'<span class="icon-bar"></span>'
.'<span class="icon-bar"></span>'
.'</button>';
// Site title (Bootstrap "brand") in navbar. Hidden by default. Customizer will
// display it if user turns of the main site title and tagline.
$navbar .= '<a class="navbar-brand" href="'
.esc_url( home_url( '/' ) )
.'" rel="home">'
.get_bloginfo( 'name' )
.'</a>';
$navbar .= '</div><!-- navbar-header -->';
// Display the desktop navbar
$navbar .= wp_nav_menu(
array( 'theme_location' => 'primary',
'container_class' => 'navbar-collapse collapse', //<nav> or <div> class
'menu_class' => 'nav navbar-nav', //<ul> class
'walker' => new wp_bootstrap_navwalker(),
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'echo' => false
)
);
echo apply_filters( 'xsbf_navbar', $navbar );
?>
</div><!-- .container -->
</div><!-- .navbar -->
</nav><!-- #site-navigation -->
So far so good. My navigation child css:
.navbar {
margin-top: 20px;
margin-bottom: 10px;
background-color: #222;
width: 70%;
height: 40px;
border-radius: 10px;
font-family: 'PT Sans Narrow', sans-serif;
}
.navbar-nav >ul {
margin: 0 auto;
}
.navbar-brand {
display: none;
}
.navbar-default .navbar-brand {
color: #978476;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #605F65;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #605F65;
}
.navbar-default .navbar-nav > li > a {
background-color: #E7E4E4;
background-color: transparent;
}
My problem is that i can't change the navigation background when in mobile view. How can i do that? It remain transparent because of the:
.navbar-default .navbar-nav > li > a {
background-color: #E7E4E4;
background-color: transparent;
}
Thank you!
Write a media query which target mobile phones on bottom of css file and put background color.
Since bootstrap uses mobile first aproach, set that color as default, then for larger devices put transparent.
This is the media query I was referring to.
#media (max-width: 767px) {
.navbar {
background-color: #e7e4e4;
}
}
Make sure you call your custom styles after the Bootstrap stylesheet.
Related
I want to change icon's color to white, but can't seem to target it properly. Is there any way of targeting it from the main.css, or only in HTML class with Bootstrap (and if so, how?).
HTML:
<header class="header" id="myHeader">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'your-theme-slug'); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<?php
wp_nav_menu(array(
'theme_location' => 'top-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'top-bar',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
));
?>
</nav>
</div>
</header>
CSS
header .container {
height: 100%;
z-index: 10;
display: flex;
align-items: center;
position: relative;
}
header .container .top-bar {
list-style-type: none;
display: flex;
}
header .container .site-link,
.site-logo {
margin-right: auto;
}
header .top-bar li a {
/*padding: 0 2rem;*/
padding: 2.5rem 2rem 2.5rem 2rem;
color: var(--off_white);
font-size: 1.3rem;
text-decoration: none;
z-index: 1000;
}
header .top-bar li.current-menu-item a {
background: var(--secondary);
}
#media (max-width: 992px) {
/* bootstrap navwalker menu */
.navbar-toggler span {
background-color: transparent;
color: var(--off_white) !important;
border: 0;
cursor: pointer;
font-size: 2rem;
display: block;
}
}
Also, how can I expand my nav-menu after clicking the hamburger icon in mobile view, to make it fullscreen and the background blurred? The question is basically how to target it, will it work targeting .top-bar?
The reason this is happening is because you are using navbar-dark. Nothing wrong with this, perfectly normal and the same would be happening with navbar-light.
This might be worth a try in your CSS. !important I hope will over ride any Boostrap CSS (but only for the button color unless you add more CSS)
button .navbar-toggler{
color: white !important;
}
With your second question. If you can provide the code examples again to make it a properly formatted question I think the question might be worthy of it's own post. 1 post 1 question usually does work best.
On main blog page all excerpt is showing but there is no continue reading and Have coded very well?
on the content.php I have the code
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div><!-- post-excerpt -->
On function.php I have place this code and the moretag class is not present in my style.css file and not in bootstrap is this is the reason.
/**
* Replaces the excerpt "more" text by a link.
*/
function new_excerpt_more($more) {
global $post;
return '... <a class="moretag" href="'. get_permalink($post->ID) . '"> continue reading »</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I expect output on the main blog page every excerpt should have continue reading link and should clickable and show full post.
after 4 hour of struggle I have found answer to my question yahoooo!!
on content.php place this.
<div class="post-excerpt">
<?php the_excerpt(); ?>
<?php if (!is_home()): ?>
<div class="continue-reading">
<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
<?php
printf(
/* Translators: %s = Name of the current post. */
wp_kses( __( 'Continue reading', 'mano-theme' ), array( 'span' => array( 'class' => array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
);
?>
</a>
</div>
</div><!-- post-excerpt -->
<?php endif ?>
on function.php place this code.
/**
* Customize the excerpt read-more indicator
*/
function new_excerpt_more( $more ) {
return " …";
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
On style.css paste this code
.continue-reading {
text-align: center;
}
.continue-reading a,
.entry-content .continue-reading a {
display: inline-block;
margin: 1em auto;
padding: 1em 2em;
font-family: "Fira Sans", sans-serif;
text-decoration: none;
border: 1px solid #c3c3c3;
}
.continue-reading a:hover,
.continue-reading a:focus,
.entry-content .continue-reading a:hover,
.entry-content .continue-reading a:focus {
border-color: #000;
border-width: 1px;
box-shadow: none;
}
.continue-reading a::after {
content: "…"
}
.continue-reading::after {
display: block;
content: "";
width: 7em;
border-bottom: 1px solid #c3c3c3;
margin: 4em auto 0;
}
.entry-content .continue-reading::after {
display: none;
}
OUTPUT:
I'm designing my page mobile friendly menu in Wordpress. I want expandable submenus to have + next to them. I'm trying to use content to add + next to it and float middle with padding but my issue is I'm getting + next to everything on the menu.
PHP:
<div class="store-menu">
<div class="store-wrapper">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( '', 'eightstore-lite' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
<div class="clear"></div>
</div>
</div>
CSS:
#media screen and (max-width: 990px) {
.sub-menu {display: none !important;}
.menu li a::after{
content:'+' !important;
color:'white' !important;
float:middle !important;
font-size:14px !important;
padding-left: 10px !important;
}
}
This is what i want
Hey so the first little bump your going to run into is that there is no float middle property. You could use flexbox for this, or just a simple text-align: center
Im guessing your other issue is that you only want the '+' icons to show on menu items that have children?
What you need to do in that case is take advantage of the 'menu-item-has-children' classes added by Wordpress to menus. Something like:
.menu li.menu-item-has-children a::after{
content:'+' !important;
color:'white' !important;
text-align: center;
font-size:14px !important;
padding-left: 10px !important;
}
Something else to point out is that are misusing the !important property. You will want to look into css specificity CSS Tricks - css specificity
I have two navigation bar in my header and the center of it is my logo. I am using WordPress and also include the classes of bootstrap. I have a problem regarding in mobile view or something between max-width of 700+ pixels. My navigation menu got destructed when i make it below 700 pixels. I provided a screenshot to determine my problem.
Also here is my site: http://bxuwp.codebox.ph/
Here is the screenshot of my problem:
Here is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-wrapper">
<div class="logo">
<?php if ( get_theme_mod( 'm1_logo' ) ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>
<?php else : ?>
<img class="logo" src="<?php echo get_bloginfo('template_url') ?>/images/qmark_logo.png"/>
<?php endif; ?>
</div>
</div>
<div class="half">
<ul class="left-navlist">
<?php
$args = array(
'container' => 'div',
'container_class' => 'collapse navbar-collapse pull-right',
'container_id' => 'bs-example-navbar-collapse-1',
'menu' => 'left',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
);
?>
<?php wp_nav_menu($args); ?>
</ul>
</div>
<div class="half">
<ul class="right-navlist">
<?php
$args1 = array(
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu' => 'right',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
);
?>
<?php wp_nav_menu($args1); ?>
</ul>
</div>
</div>
</div>
Here is my little custom CSS for bootstrap navbar:
.navbar-fixed-top {
min-height: 95px;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
background-color: #e1e1e1;
color: #fff;
}
.navbar-inverse {
border-radius: 0px;
margin-bottom: 0;
background-color: #e1e1e1;
border-color:#e1e1e1;
font-size: 16px;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
background-color: #e1e1e1;
color: #993300;
}
.navbar-inverse .navbar-nav > li > a {
color: #252525;
}
.logo-wrapper {
text-align: center;
margin-bottom: -65px;
}
.logo {
margin-top: 5px;
max-width: 80px;
display: inline-block;
}
.half {
width: 50%;
display: block;
float: left;
}
.right-navlist {
padding-left: 60px;
}
.left-navlist {
text-align: right;
padding-right: 60px;
}
You have a media query making the nav float left only on a minimum of 768px. Some browsers render pixels slightly differently so you may have noticed it's not exactly at 768px. Remove the query (or override it) and you will be fine!
#media (min-width: 768px) {
.navbar-nav>li {
float: left;
}
}
Just an FYI though, you will have the same issue around 400px so you could make it so that your text is smaller at that window size. Basically, if the text stays that same size when it's a window size of 400px, the container of those elements is too small and bumps one of the containers down (Contact Us). Again, that's only happening right around 400px. You may want to give it alternative treatment instead like a hamburger icon controlling a nav that slides into view.
here's my website http://www.saraandcompany.ca/
I would like the navigation under the image to also be centred.
I've tried all sorts of ways of doing it but I have no idea how.
here's the header.php file.
<center><img src="http://www.saraandcompany.ca/wp-content/uploads/2014/03/weblogo.png" style="PADDING-BOTTOM:15px"></center>
<h1 id="main-title"><?php bloginfo('name'); ?></h1>
<nav>
<?php $args = array(
'show_home' => Work,
'sort_column' => 'menu_order, post_title'
); ?>
<?php wp_page_menu( $args ); ?>
</nav>
<div class="clearfix"></div>
</header>
thank you so much in advance.
You need to change a few lines in the CSS:
nav {
float: right; /* Remove */
}
.menu {
display: inline-block; /* Keep */
margin-left: 20px; /* Remove */
}
nav li {
display: inline;
margin-left: 20px; /* Remove */
margin: 0 10px; /* Add */
}