I have built the navigation in html and css but has been given back to me with wordpress installed and some of my styling hasn't rendered as expected. From my understanding there are limitations surrounding the styling of <a> tags in links.
I want to give the dynamically created a bottom margin of -15px.
The<a> is in an <li> . Adding a margin to that doesn't effect the <a> within it, not does adding margin to the <ul>. It appears to not to be inside these elements?
<div class="nav-head">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'container_class' => 'btn',
'container_id' => '',
'menu_class' => 'nav-menu',
)
);
?>
<a type="button" class="btn secondary-btn" href="/contact">Request Demo</a>
</div>
CSS
.nav-head {
display: flex;
}
ul.nav-menu {
display: flex;
}
li.menu-item {
margin-bottom: -15px;
display: inline-block;
}
a {
color: blue;
padding: 15px;
display: inline-block;
}
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.
When I shrink the browser for mobile screens,lists which are in footer, doesnt seem centered.
You can see it on this link:
https://www.sac-ekimi.deniz-tasarim.site/bize-ulasin/
( "Hakkımızda" and "Destek" lists )
How to center them?
Here is the codes for these lists:
<div class="col-sm-3" style="margin-left:auto; margin-right:auto;" >
<h5 style="text-align: center;"><?php
// Using the global argment
global $redux_demo; // Same as your opt_name
echo $redux_demo['footer-text-1']; ?></h5>
<ul>
<li style="display: inline-block; "><a href="#">
<?php wp_nav_menu( array(
'theme_location' => 'menu_name',
'container' => "nav",
'container_class' => "topnav",
'container_id' => "topnav",
'menu_class' => "topmenu",
'menu_id' => "topmenu",
)
);
?>
</a></li>
</ul>
</div>
<div class="col-sm-3 footermenu" style="margin-left:auto; margin-right:auto;">
<h5 style="text-align: center;"><?php
// Using the global argment
global $redux_demo; // Same as your opt_name
echo $redux_demo['footer-text-2']; ?></h5>
<ul >
<li style="display: inline-block;"><a href="#" >
<?php wp_nav_menu( array(
'theme_location' => 'menu_name2',
'container' => "nav",
'container_class' => "topnav",
'container_id' => "topnav",
'menu_class' => "topmenu",
'menu_id' => "topmenu",
)
);
?>
</a></li>
</ul>
</div>
It appears the browser is adding padding-left: 40px; to all uls on the page as part of its default styling. You could fix this by adding a CSS Reset to your project but at this point, that will likely break a lot more code than it will fix. Its generally advised to plug in a CSS Reset at the start of a project.
To resolve this issue alone, I'd recommend overwriting the the ul#topmenu like so:
#topmenu {
padding-left: 0;
}
This will resolve the extra padding you're seeing on your uls.
This will not completely resolve the alignment issues you're seeing on smaller screens. If a single word is longer than the parent containing it, it will overflow past the edge of the parent so as to keep the text readable.
I'd recommend re-flowing your footer on smaller screen sizes to be stacked.
Should look something like this:
#media (max-width: 767px) {
#myFooter .col-sm-3 {
flex: 0 0 100%;
max-width: 100%;
}
#myFooter .col-sm-3 ul {
padding-left: 0;
text-align: center;
}
}
For media queries to work, you need to include:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Between the tags.
https://www.w3schools.com/css/css_rwd_viewport.asp
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.
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.