I'm trying to put a theme I made with bootstrap into WordPress. I have enqueued all style sheets and my console shows no errors. when I look at my page through WordPress i have a border around everything and my rounded circles with images inside are now square. how do i stop WordPress from changing that?
<?php
function load_stylesheets(){
wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');
wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');
wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
wp_enqueue_style('custom');
/*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
wp_enqueue_style('custom');*/
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function addjs(){
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
sites by bryan
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<!-- -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
skills
</li>
<li class="nav-item">
contact
</li>
</ul>
</div>
</nav>
<!-- end nav element -->
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- end headder section -->
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<!-- section title -->
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<!-- end of section title -->
<div class="row">
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-html5"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">html</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
clean written code and layout that includes comments to ease the
process future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<svg
width="1em"
height="1em"
viewBox="-1 0 18 18"
class="bi bi-bootstrap"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12 1H4a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zM4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4z"
/>
<path
fill-rule="evenodd"
d="M8.537 12H5.062V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396zM6.375 4.658v2.467h1.558c1.16 0 1.764-.428 1.764-1.23 0-.78-.569-1.237-1.541-1.237H6.375zm1.898 6.229H6.375V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"
/>
</svg>
</a>
<h6 class="text-uppercase font-weight-bold my-3">bootstrap</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
used for quick production to make scaleable sites that view on any
device
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-css3-alt"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">css</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
written to match the layout of the page from top to bottom in
order with coments to ease the process for future updates
</p>
</div>
<!-- end of single skill -->
<!-- single skill -->
<div class="col-sm-6 col-lg-3 text-center my-3">
<a href="" class="skills-icon p-2 rounded-circle">
<i class="fab fa-js"></i>
</a>
<h6 class="text-uppercase font-weight-bold my-3">js</h6>
<div class="skills-underline"></div>
<p class="w-75 mx-auto text-muted">
front-end javascript to bring a site to life and give the viewer a
pleasent and smooth experience
</p>
</div>
<!-- end of single skill -->
</div>
</div>
</section>
<!-- end of skills section -->
<!-- contact section-->
<section class="contact py-5" id="contact">
<div class="container">
<div class="row">
<div class="col-8 mx-auto col-md-6">
<form>
<div class="form-group">
<input
type="email"
class="form-control contact-input p-3"
placeholder="Enter Email"
/>
</div>
<button
type="submit"
class="btn btn-outline-secondary btn-block contact-btn"
>
submit
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end of contact section-->
<?php get_footer(); ?>
#import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
:root {
--mainBlue: #40acf1;
--transparentBlue: rgba(64, 172, 241, 0.7);
--mainWhite: #ffffff;
--mainBlack: #292f36;
--mainGrey: rgb(216, 214, 214);
--mainYellow: #e3b505;
}
body {
font-family: "Roboto", sans-serif;
color: var(--mainBlack);
background: var(--mainWhite);
}
/* navbar */
.navbar {
background: var(--mainGrey);
}
.navbar-icon {
font-size: 2rem;
color: var(--mainBlue);
}
.navbar-toggler {
outline-color: var(--mainBlue) !important;
}
.nav-link {
color: var(--mainBlack);
text-transform: capitalize;
}
.nav-link:hover {
color: var(--mainBlue);
}
/* header */
.header {
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 75% 100%, 25% 100%, 0 90%, 0 0);
color: var(--mainWhite);
overflow: hidden;
}
.height-max {
min-height: calc(100vh - 76px);
background: url(../img/openbridge.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
animation-name: zoom;
animation-duration: 20s;
animation-delay: 5s;
animation-iteration-count: infinite;
}
#keyframes zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2) translate(-5%);
}
100% {
transform: scale(1);
}
}
/* skills section*/
.skills-icon {
font-size: 3rem;
color: var(--mainYellow);
background: var(--mainGrey);
}
.skills-icon:hover {
color: var(--mainYellow);
}
.skills-underline {
width: 4rem;
height: 0.3rem;
background: var(--mainBlue);
margin: 1rem auto;
}
/*contact section*/
.contact {
clip-path: polygon(25% 15%, 75% 15%, 100% 0, 100% 100%, 0 100%, 0 0);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("../img/trainstation.jpg") center/cover fixed no-repeat;
}
.contact-input {
font-size: 1.5rem;
text-transform: capitalize;
background: transparent;
border-color: var(--mainYellow);
color: var(--mainYellow) !important;
}
.contact-input::placeholder {
color: var(--mainYellow);
}
.contact-input:focus {
background: transparent;
border-color: var(--mainYellow);
}
.contact-btn {
text-transform: uppercase;
color: var(--mainYellow);
border-color: var(--mainYellow);
}
.contact-btn:hover {
background: var(--mainYellow);
color: var(--mainBlack);
}
/* footer icons */
.footer {
background: var(--mainGrey);
}
.footer-icon {
font-size: 1.5rem;
text-decoration: none;
color: var(--mainYellow);
transition: all 1s ease-in-out;
}
.footer-icon:hover {
color: var(--mainBlue);
}
The following should be working, I've jus tested it. I've added a CDN check, a fallback and a the proper required attributes (integrity and crossorigin). You must place that in your function.php file. You can't enqueue file on the front end, like in your example.
Just make sure you update the fallback path.
<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if( ! is_admin() ) {
/**
* Deregister Wordpress jquery core version
* #link https://developer.wordpress.org/reference/functions/wp_deregister_script/
*/
wp_deregister_script( 'jquery' );
/**
* Register then enqueue jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to jquery_js
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_jquery_js = #fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
if( $test_jquery_js !== false ) {
wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js', array(), '3.5.1', false );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'jquery_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery-3.5.1.min.js', array(), '3.5.1', false );
};
wp_enqueue_script( 'jquery_js' );
add_filter( 'script_loader_tag', 'data_jquery_js', 10, 3 );
function data_jquery_js( $tag, $handle, $src ) {
if( $handle === 'jquery_js' ) {
$integrity = 'sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0='; // ... integrity key #link https://code.jquery.com/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous' async></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue bootstrap_bundle_js
* Dependency to jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_bundle_js
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_bundle_js = #fopen( 'https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js', 'r' );
if( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'bootstrap_bundle_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.bundle.min.js', array( 'jquery_js' ), '4.5.3', true );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
add_filter( 'script_loader_tag', 'data_bootstrap_bundle_js', 10, 3 );
function data_bootstrap_bundle_js( $tag, $handle, $src ) {
if( $handle === 'bootstrap_bundle_js' ) {
$integrity = 'sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx'; // ... integrity key #link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<script",
"integrity='" . $integrity . "' crossorigin='anonymous'></script>",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue magnific_popup_js
* Dependency to jquery_js
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_js = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', 'r' );
if( $test_magnific_popup_js !== false ) {
wp_register_script( 'magnific_popup_js', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_script( 'magnific_popup_js', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/jquery.magnific-popup.min.js', array( 'jquery_js' ), '1.1.0', true );
};
wp_enqueue_script( 'magnific_popup_js' );
/**
* Register then enqueue bootstrap_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add a rel='preload prefetch' <link> element and required attributes to bootstrap_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$test_bootstrap_css = #fopen( 'https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css', 'r' );
if( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css', array(), '4.5.3', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'bootstrap_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/bootstrap.min.css', array(), '4.5.3', 'all' );
};
wp_enqueue_style( 'bootstrap_css' );
add_filter( 'style_loader_tag', 'data_bootstrap_css', 10, 3 );
function data_bootstrap_css( $tag, $handle, $src ) {
if( $handle === 'bootstrap_css' ) {
$integrity = 'sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2'; // ... integrity key #link https://getbootstrap.com/docs/4.5/getting-started/introduction/
$tag = str_replace(
array(
"<link rel='stylesheet'",
"media='all' />",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='style' integrity='" . $integrity . "' crossorigin='anonymous' />" . PHP_EOL . "<link rel='stylesheet'",
"integrity='" . $integrity . "' crossorigin='anonymous' type='text/css' media='all' />",
),
$tag
);
};
return $tag;
};
/**
* Register then enqueue fontawesome_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_fontawesome_css = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', 'r' );
if( $test_fontawesome_css !== false ) {
wp_register_style( 'fontawesome_css', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css', array(), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'fontawesome_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array(), '5.15.1', 'all' );
};
wp_enqueue_style( 'fontawesome_css' );
/**
* Register then enqueue magnificpopup_css
* Dependency to bootstrap_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*
* Check if CDN's url is valid, if not return fallback
* #link https://www.php.net/manual/en/function.fopen.php
*/
$test_magnific_popup_css = #fopen( 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', 'r' );
if( $test_magnific_popup_css !== false ) {
wp_register_style( 'magnific_popup_css', '//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
} else {
// ... fallback, edit "path/to/fallback/"
wp_register_style( 'magnific_popup_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'bootstrap_css' ), '5.15.1', 'all' );
};
wp_enqueue_style( 'magnificpopup_css' );
/**
* Register then enqueue bsite_css
* Dependency to bootstrap_css, magnificpopup_css
* #link https://developer.wordpress.org/reference/functions/wp_register_style/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_register_style( 'bsite_css', trailingslashit( get_template_directory_uri() ) . 'path/to/fallback/all.min.css', array( 'magnificpopup_css' ), '1.0.0', 'all' );
wp_enqueue_style( 'bsite_css' );
};
}; ?>
Related
My css classes are not affecting the h1 containing the wp single_post_title()
<div class="intro-text child">
<!--<h1 class="herotext sr-hero">Kompletní<br>realizace staveb.</h1>-->
<?php
if ( is_front_page() ) {
echo '
<img src="' . get_template_directory_uri() .'/img/samsonsvg2_animated.svg" class="samsonlogo">
';
}
else {
echo '
<h1 class="herotext sr-hero">'. single_post_title() .'</h1>
';
}
?>
</div>
css:
.herotext {
font-size: 10vh;
font-weight: 300;
color: #EF7F1A;
}
Solved it by assigning the .herotext class to the parent div
<div class="intro-text child herotext">
<!--<h1 class="herotext sr-hero">Kompletní<br>realizace staveb.</h1>-->
<?php
if ( is_front_page() ) {
echo '
<img src="' . get_template_directory_uri() .'/img/samsonsvg2_animated.svg" class="samsonlogo">
';
}
else {
echo '
<h1 class="sr-hero">'. single_post_title() .'</h1>
';
}
?>
</div>
So I've tried adding a phone number to the correct places on my site, but it's not styling correctly. The problem I'm running into is the mobile display. The logo will not center, and the phone number is not showing inline in the navbar.
What I'm trying to achieve:
desktop mobile
What I have:
http://lakeozarkelectrician.com/
CSS:
// -------------- Mobile -------------- //
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.img-fluid {
display: block;
margin: 0 auto;
}
a[href^="tel:"] {
color: white;
text-decoration: none;
float: none;
}
}
// ------------- Telephone Styling ------------ //
#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}
a[href^="tel:"] {
color: black;
text-decoration: none;
display: inline;
}
Header:
<body <?php body_class(); ?>>
<div class="hfeed site" id="page">
<!-- ******* Header ******* -->
<header>
<div class="wrapper-fluid">
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6 d-block hidden-md">
<div id="telephone">
<p>Call Now<br>
<i class="fa fa-phone"></i>
636-244-9045</p>
</div>
</div>
</div>
</div>
<!-- ******************* The Navbar Area ******************* -->
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
<span class="navbar-text d-inline-block d-sm-none">
<i class="fa fa-phone"></i>
636-244-9045
</span>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
</div>
</header>
</div>
You can try with this :
#media screen and (max-width: 480px) {
.navbar-brand {
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
margin-left: auto; // <-- add this
margin-right: auto; // <-- add this
display: table; // <-- add this
}
#telephone{display:none;} // <-- add this
.navbar > .container + span{ // <-- add this
position: absolute; // <-- add this
right: 15px; // <-- add this
top: 10px; // <-- add this
} // <-- add this
}
sorry because i know that its old but may useful
u can false container like below and add what ever you want
<div id="navbarNavDropdown" class="collapse navbar-collapse"><?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?><span class="nav-item">MY NEW ITEM</span></div>
mobileI've looked everywhere for centering a logo on mobile in WordPress, and I can't find anything. Here's what I've styled...
I also want the phone number to move into the navbar on mobile, but one step at a time, right? Any help is greatly appreciated...
Updated with more code. My apologies. I'm not sure if my media query is evey applying. I tested on Firefox and it only shows two of the four styles I've used. Is that normal? The float right and font-size aren't being displayed.
I hope if I can nail this down the other site section will be easier. I do everything in WordPress and I like the functionality. I also want to understand the CSS before I try tackling PHP, if that makes sense.
#media screen and (max-width: 480px) {
a[href^="tel:"] {
color: black;
text-decoration: none;
float: none;
}
.navbar-brand {
margin: 0 !important;
}
}
// ------------- Telephone Styling ------------ //
#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}
a[href^="tel:"] {
color: black;
text-decoration: none;
display: inline;
}
<div class="hfeed site" id="page">
<!-- ******* Header ******* -->
<header>
<div class="wrapper-fluid">
<!-- Your site title as branding in the menu -->
<div class="container">
<div class="row">
<div class="col-md-6">
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?>
</div>
<!-- end custom logo -->
<div class="col-md-6">
<div id="telephone">
<p>Call Now<br>
<i class="fa fa-phone"></i>
636-244-9045</p>
</div>
</div>
</div>
</div>
<!-- ******************* The Navbar Area ******************* -->
<div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">
<a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
'understrap' ); ?></a>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<?php if ( 'container' == $container ) : ?>
<div class="container">
<?php endif; ?>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new WP_Bootstrap_Navwalker(),
)
); ?>
<?php if ( 'container' == $container ) : ?>
</div><!-- .container -->
<?php endif; ?>
</nav><!-- .site-navigation -->
</div><!-- .wrapper-navbar end -->
</div>
</div>
</header>
Try:
.navbar-brand {
display: block;
text-align: center;
}
I checked your website and I got your problem.
You have for .navbar-brand this code :
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
And problem is with display: inline-block; and margin-right: 1rem; these two are stopping your action to center logo.
So replace .navbar-brand like this :
padding-top: .3125rem;
padding-bottom: .3125rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
And code to center the logo inside .img-fluid :
display: block;
margin: 0 auto;
This works for sure. Hope you understand.
I was trying to make a menu using cols from bootstrap. Something similar to this:
http://i.stack.imgur.com/55xst.png
But I think it's not the best way to make it because I found so much troubles when I tried to implement into Wordpress..
Have some idea how can make it in the right way?
This is my code
HTML:
<div class="container main-menu">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-menu logo">
<div class="item-menu">
<figure>
<img src="http://www.sdi-inc-usa.com/image/35012580_scaled_116x87.jpeg" alt="">
</figure>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum & lorem ipsum
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
<div class="item-menu">
<div class="txt-main-menu">
lorem ipsum lorem ipsum lorem ipsum
</div>
</div>
</div>
</div>
</div>
CSS:
.main-menu {
margin-top: 40px;
}
.main-menu > .row > .logo {
text-align: left!important;
}
.main-menu > .row > .col-menu > .item-menu {
background: #f2f2f2;
padding: 10px;
height: 107px;
font-size: 1.375em;
position: relative;
}
.main-menu > .row > .col-menu > .item-menu:hover {
background: #bcd22c;
}
.txt-main-menu > a {
font-family: 'museo-700';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 25px 25px;
text-decoration: none;
color: #565656;
}
.col-menu {
padding-left: 0px;
padding-right: 5px;
padding-bottom: 5px;
}
/** END Main Menu - LOGO*/
#media screen and (max-width: 767px) {
div.col-menu:nth-child(2n+3),
div.col-news:nth-child(2n+3),
div.col-menu:nth-child(2),
div.col-news:nth-child(2) {
padding: 0;
}
.col-grid {
padding-right: 0;
}
}
Thank you
I'd suggest you use the "navbar" component. It is purpose build for this type of thing.
http://getbootstrap.com/components/#navbar
I found this bootsrap to wordpress series online http://bootstrapwp.com/adding-bootstrap-menu-wordpress-theme/ It is a excellent course for combining bswp.
The first step is to add a custom Walker menu to create the Bootstrap menu for the WordPress theme. We will then go over how to add the custom menu to the header of our WordPress theme and some minor customization options. You will also learn how make sure the menu has all the markup needed to be responsive and support child menu items.
Create a new file called bootstrap-walker.php in the /inc/ directory
In this file add the following code:
<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'bootstrap_setup' );
if ( ! function_exists( 'bootstrap_setup' ) ):
function bootstrap_setup(){
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul class=\"dropdown-menu\">\n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$attributes .= ($args->has_children) ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
else if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
$id = $element->$id_field;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
}
endif;
Save the boostrap-walker.php file
Open functions.php
At the bottom of this file, you will want to write the code to include our new bootstrap-walker.php file. It should look like the following:
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package bootstrapwp
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<nav role="navigation">
<div class="navbar navbar-static-top navbar-default">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<?php
$args = array(
'theme_location' => 'primary',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right',
'walker' => new Bootstrap_Walker_Nav_Menu()
);
if (has_nav_menu('primary')) {
wp_nav_menu($args);
}
?>
</div>
</div>
</div>
</nav>
</header><!-- #masthead -->
Note: I also removed the “skip to content” link from this code. I go over this in the next video tutorial.
Save the header.php file
Now that we have all the code in place, we can create a new Menu from the WordPress Dashboard. Login to the backend of your WordPress site (wp-admin) and go to Appearance -> Menu
Create a new menu, select and add a few pages to the menu, and assign it to the Primary Menu theme location.
Reload the front-end of your WordPress and play with your awesome Bootstrap menu!
If you want to learn more about the Walker Class you can read more about it http://codex.wordpress.org/Class_Reference/Walker
I am new to Joomla and rather unexperienced with html/css. I have a module that adds a menu to my website. The menu is displayed correctly, but it seems that the position I use dedicates much more width to the position than I fill.
How do I resize a position or the size of a module that takes the position? I can't see any settings that would allow me to alter the width.
I assume I have to hack around in the css files then, right? How do I find the css responsible for the expansion in width of the module? I looked naively for 'position-8', but that would have been to easy.
I appreciate any pointer.
The screenshot shows my menu located in position-8 and the size of the position (the grey area). Next to it starts the article-content area. I want to fix this whole, but I am unsure of how to do that.
Firebug shows me this html-values for the grey-area
<div id="sidebar" class="span3" style="overflow: visible; z-index: 1;">
<div class="sidebar-nav" style="overflow: visible; z-index: 1;">
<div class="moduletable sidebar.swmenu" style="overflow: visible; z-index: 1;">
<h3>LTL Menu</h3>
<table id="outertable" class="outer" align="left" style="overflow: visible; z-index: 1;">
<tbody style="overflow: visible; z-index: 1;">
<tr style="overflow: visible; z-index: 1;">
<td style="overflow: visible; z-index: 1;">
<div id="outerwrap" style="overflow: visible; z-index: 1;">
</td>
</tr>
</tbody>
</table>
<hr style="display:block;clear:left;margin:-0.66em 0;visibility:hidden;">
<script type="text/javascript">
<script type="text/javascript">
</div>
</div>
The index.php of my template, I want to change the size of the position-8
<?php
/**
* #package Joomla.Site
* #subpackage Templates.protostar
*
* #copyright Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
* #license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
// Getting params from template
$params = JFactory::getApplication()->getTemplate(true)->params;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->getCfg('sitename');
if($task == "edit" || $layout == "form" )
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
$doc->addScript('templates/' .$this->template. '/js/template.js');
// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
// Add current user information
$user = JFactory::getUser();
// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="'. JUri::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
}
elseif ($this->params->get('sitetitle'))
{
$logo = '<span class="site-title" title="'. $sitename .'">'. htmlspecialchars($this->params->get('sitetitle')) .'</span>';
}
else
{
$logo = '<span class="site-title" title="'. $sitename .'">'. $sitename .'</span>';
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<jdoc:include type="head" />
<?php
// Use of Google Font
if ($this->params->get('googleFont'))
{
?>
<link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName');?>' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,h2,h3,h4,h5,h6,.site-title{
font-family: '<?php echo str_replace('+', ' ', $this->params->get('googleFontName'));?>', sans-serif;
}
</style>
<?php
}
?>
<?php
// Template color
if ($this->params->get('templateColor'))
{
?>
<style type="text/css">
body.site
{
border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
background-color: <?php echo $this->params->get('templateBackgroundColor');?>
}
a
{
color: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary
{
background: <?php echo $this->params->get('templateColor');?>;
}
.navbar-inner
{
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
}
</style>
<?php
}
?>
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
</head>
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
?>">
<!-- Body -->
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
<!-- Header -->
<header class="header" role="banner">
<div class="header-inner clearfix">
<a class="brand pull-left" href="<?php echo $this->baseurl; ?>">
<?php echo $logo;?> <?php if ($this->params->get('sitedescription')) { echo '<div class="site-description">'. htmlspecialchars($this->params->get('sitedescription')) .'</div>'; } ?>
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="position-0" style="none" />
</div>
</div>
</header>
<?php if ($this->countModules('position-1')) : ?>
<nav class="navigation" role="navigation">
<jdoc:include type="modules" name="position-1" style="none" />
</nav>
<?php endif; ?>
<jdoc:include type="modules" name="banner" style="xhtml" />
<div class="row-fluid">
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<main id="content" role="main" class="<?php echo $span;?>">
<!-- Begin Content -->
<jdoc:include type="modules" name="position-3" style="xhtml" />
<jdoc:include type="message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="position-2" style="none" />
<!-- End Content -->
</main>
<?php if ($this->countModules('position-7')) : ?>
<div id="aside" class="span3">
<!-- Begin Right Sidebar -->
<jdoc:include type="modules" name="position-7" style="well" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer" role="contentinfo">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : '');?>">
<hr />
<jdoc:include type="modules" name="footer" style="none" />
<p class="pull-right">
<a href="#top" id="back-top">
<?php echo JText::_('TPL_PROTOSTAR_BACKTOTOP'); ?>
</a>
</p>
<p>
© <?php echo date('Y'); ?> <?php echo $sitename; ?>
</p>
</div>
</footer>
<jdoc:include type="modules" name="debug" style="none" />
</body>
</html>
If you check:
<?php if ($this->countModules('position-8')) : ?>
<!-- Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="position-8" style="xhtml" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
position-8 is inside div #sidebar
You have to add a suffix to your module settings:
Advanced -> Module Class Suffix: mymenu
Then in your template css under: templates/your_template/css/template.css
You have to add: div#sidebar div.mymenu{ width: 100%; }
*change 100% with the number that will fit better
EDIT:
Your template is responsive based on bootstrap. You have to edit <div id="sidebar" class="span3"> span3 value to span2 or span1 and in your head section:
// Adjusting content width
if ($this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span6";
}
elseif ($this->countModules('position-7') && !$this->countModules('position-8'))
{
$span = "span9";
}
elseif (!$this->countModules('position-7') && $this->countModules('position-8'))
{
$span = "span9";
}
else
{
$span = "span12";
}
increase the span9 to span10 or span11 to fill the gap.