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
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.
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
I made this page in wordpress and foundation.I want to change the below menu :
into this:
My css to override foundation's app.css is as below:
.top-bar-section li
{
width:150px;
word-wrap:break-word;
border-bottom: solid 1px #BC9633;
float:left;
}
PART OF app.css
.top-bar-section li:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;background:#ffffff;}.top-bar-section li:not(.has-form) a:not(.button):hover {border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;color:#000000;border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button):hover {background:#BC96633;color:#000000;}
HTML
<div class="menu-wrapper">
<div class="top-bar-container contain-to-grid show-for-medium-up">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<!--<h1><?php bloginfo('name'); ?></h1>-->
<img src="img/fspb_logo.png" width="165" height="145" >
</li>
</ul>
<section class="top-bar-section" style="padding-top:55px;">
//below two lines display the menu
<?php foundationPress_top_bar_l(); ?>
<?php foundationPress_top_bar_r(); ?>
</section>
</nav>
</div>
</div>
***** I removed padding:0 15px;line-height:45px; from .top-bar-section li..and it turned out to be below:
How do I push the long menu up pls?
You could also check the padding/margin on the as well. That might be where the issue is. Or the line-height. Kind of hard to pinpoint the exact problem without the full source (html and css of the problem area). Hope that helps!
CSS
.top-bar-section li
{
width:150px;
word-wrap:break-word;
border-bottom: solid 1px #BC9633;
float:left;
padding-bottom: 0px;
line-height: 20px;
}
Below is my updated css
.top-bar-section li
{
width:103px;
/*word-wrap:break-word;*/
white-space:word-wrap;
border-bottom: solid 1px #BC9633;
float:left;
padding-top : 0; padding-bottom: 0; margin-bottom: 0;
margin-right:10px;
height:35px;
line-height:11px;
}
It turned out better than before and solved my problem. It's just that The ABOUT FSPB looks a bit weird. Only if the words can be used to stretch the line taking up by the line underneath it would be better. If anyone knows how to do that, pls feel free.Thanks all.
There is no Foundation way to accomplish this. You can either us a css positioning or a table valign approach depending on your goals. Here is a SO post that describes how to accomplish both.
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 */
}
So, after a few bootstrap tuts, decided to try mixing it up with wordpress. A whole bunch of questions there, but my main concern right now is, why isn't angies list image moving to the right? I did float:right in css, i did pull-right class, i even did margin-left:99%... it's still there. WHY?
Any other notes are appreciated as well :)
you can see the whole thing here
http://soloveich.com/
<body>
<div class="container-fluid>
<div class="row-fluid" id="heady">
<div class="span4"><div id="sign"></div></div>
<div class="span4" id="menubg">
<nav class="navbar">
<div class="navbar-inner">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
</nav>
</div>
<div class="span4" class="pull-right"><div id="angies"><img src="http://www.soloveich.com/wp-content/themes/Yellow-sign/images/angies.png"></div>
<div id="lic">
<ul id="licen">
<li>Phone# (555)555-5555</li>
<li>Lic# 7778899</li>
<li>Bond# 111223344</li>
</ul>
</div>
</div>
</div>
and the css
#heady {
background-color: #727272;
Height:370px;
}
#sign{
background-image: url(images/sign.png);
height: 334px;
width: 334px;
margin-left: 15px;
margin-top: 10px;
}
#menubg {
font-family: 'Contrail One', cursive;
font-weight: 200;
font-size: 25px;
text-decoration: none;
margin-top:130px;
}
#angies {
margin-top: 20px;
float: right;
margin-left: 99%;
}
If you want it to have your #angies to the very right of your page do the following:
#angies{
position:absolute;
margin-top:20px;
right:0px;
}
Long story short: you will force your element to break out of the flow in an absolute position at 0px from your right.
Also as I was browsing to the source of the page using developer tools in Chrome I realized that you are not embedding correctly the bootstrap javascript. See the last script tag before your ending </body> tag. You forgot to include the path to the template which is mandatory in Wordpress when you are including javascript files. That line of code should look like this:
<script src="<?php bloginfo('template_url');?>/js/bootstrap.min.js"></script>
instead of just this:
<script src="js/bootstrap.min.js"></script>