jjerro

hi RickAero, sorry..
i’ve tried using the method i wrote, and its work fine, but yeah, i am not cropping the image because i just using chrome dev tool to temporarily edit and see what happen in a website. here is your web look like when i edit using chrome dev tool..

okay, so the different is you cropped it as i recommended, but try not to crop it, may it should work..

you are welcome..

sincerely,

jjerro

hi RickAero, sorry for late reply, i was wondering how did you put your logo there, but i just realize u just crop your image and upload it as header image. so, open up header.php,
at the line 36 or so, you should see <div id="site-header">, below it, cut the code from opening a tag to the closing:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
		</a>

and put it under:

<header id="masthead" class="site-header" role="banner">
		<div class="header-main">

then delete the h1 tag;
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

and, try to corp the image logo to 105 x 48 px if your first logo image didn’t fit in.

remember: always back up your file before editing it and always use child theme to avoid upgrade issue.

hi afrolock, try to change this in your style.css line 236:

.wrapper {
	background: #ffffff;
	margin:0 auto;
	padding: 0 30px;
	width: 1230px;
}

to

.wrapper {
	background: transparent;
	margin:0 auto;
	padding: 0 30px;
	width: 1230px;
}

hi temtro,
using .site class should work,

.site {
  	background-color: rgba(255,255,255,0.7)!important;
}

if it doesn’t, probably your background is registered to .site-inner, so change your child theme css using

.site-inner {
  	background-color: rgba(255,255,255,0.7)!important;
}

sincerely,

jjerro

sorry, my bad, try;

li.menu-item a:visited{
background-color:red;
color: red;
}

i’m not sure this is what you are looking for..
by using :visited pseudo class, this should change the button[or area] and text of menu page to red when the menu is visited, but it is not revert the color of the recent visited menu when you open another menu page, except you clean the browser history…

try to read this.. using jquery for your menu..

sincerely,

jjerro

ps: this is from w3school, about using pseudo class.

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

Hi Glen, I assume you have read this wp dev handbook here
to create custom page template you could use page.php code and paste it into your page-{slug}.php, this will create custom page that would look similiar to your blog post page or to create something similiar to your home page then use index.php code. remember to write an opening PHP comment at the top of the file that states the template’s name.

note: i realized that the index.php and home.php have the same template codes.
there is one more template, front-page.php, it is different template from index, home or page.php

*remember to back up any file you want to change before change it. and it is better to use child theme to change your website look.

sincerely,
jjerro.

i’m new to css but try add this to your css file, change [blue] the color or hex as you needed.

li.menu-item a:hover{
	color:blue;

}

and for to keep color for the active menu page just change hover to active.

li.menu-item a:hover{
	color:blue;
	background-color:transparent;

}
li.menu-item a:active{
	color:blue;
	background-color:transparent;

}

your menu item is registered under class menu-item,
note, i’m using chrome dev tools and found that class, but u should back up your css before change or add any codes.

sincerely,
jjerro

i’m not an expert but try to limit your blog post per page… go to dasboard>settings>reading>Blog pages show at most and set it to 2 post per page..
Recently, i have developed my own template and i found this problem too, when my post reach 4 post per page, the sidebar move below the content.
i don’t know why but the problem is with the page div tags, i believe there are some miss placed tag div inside index.php.. if you want to look inside your template file then look for incomplete div tag.
use firebug or chrome dev tool to inspect the side bar..
this is what i discover from your site [
and this script actually load from your index.php, begin from line 3]:

<div id="site-content">
div class="row">
	<div class="col-md-8">
		<main id="content"
...bla...

and when i changed to this, the sidebar arranged back to its place:

<div id="site-content">
div class="row col-md-8">
	<div class="col-md-12">
		<main id="content"
...bla...

if you want to change the code, i suggest to make a child theme, or ask for the update from Olsen..

sincerely,
jjerro

I see your code, just cut the close div tag for class=”header-main” and put it after the closing nav tag inside header.php. look at these code:
before:

<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			<h1 class="site-title"><a href="https://rickybonilla.com/" rel="home">Ricky Bonilla</a></h1>

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container">Search</a>
			</div>

		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<form role="search" method="get" class="search-form" action="https://rickybonilla.com/">
				<label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search …" value="" name="s">
				</label>
				<input type="submit" class="search-submit" value="Search">
			</form>			</div>
		</div>
		<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<button class="menu-toggle">Primary Menu</button>
				<a class="screen-reader-text skip-link" href="#content">Skip to content</a>
				<div class="menu-home-container"><ul id="primary-menu" class="nav-menu"><li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-40"><a href="https://rickybonilla.com">Home</a></li>
</ul></div>			</nav>
	</header>

After:

<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			<h1 class="site-title"><a href="https://rickybonilla.com/" rel="home">Ricky Bonilla</a></h1>

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container">Search</a>
			</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<form role="search" method="get" class="search-form" action="https://rickybonilla.com/">
				<label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search …" value="" name="s">
				</label>
				<input type="submit" class="search-submit" value="Search">
			</form>			</div>
		</div>
		<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<button class="menu-toggle">Primary Menu</button>
				<a class="screen-reader-text skip-link" href="#content">Skip to content</a>
				<div class="menu-home-container"><ul id="primary-menu" class="nav-menu"><li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-40"><a href="https://rickybonilla.com">Home</a></li>
</ul></div>			</nav>
		</div>
	</header>

note that should give your search button and main nav at the same row. and if i could suggest you, try to remove the <h1 class="site-title"> because it doesn’t even needed.

sincerely,
jjero

maybe you could consider to use twitter bootstrap css and use grid property to take care of it.. i’m not an expert but you could try it.
“twitter bootstrap cdn Link
your code:

<hgroup>
<img src="https://lvefoundation.org.uk/wp-content/uploads/2016/06/cropped-Logo-No-Text.png" height="250"></br>
the</br>
lve</br>
foundation</br>

<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

add this to your header:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">

change header hgroup to:

<hgroup class="col-sm-12">
<div class="col-sm-2">
<img src="https://lvefoundation.org.uk/wp-content/uploads/2016/06/cropped-Logo-No-Text.png" height="250"></br>
the</br>
lve</br>
foundation</br>
</div>
<h2 class="site-description col-sm-6"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

but, i’m not sure this is good enough, since you have to make some change to alter the position like padding-top. read more about bootstrap-grid here

maybe you can try this.. Single Page i’m not sure if this theme is what you are looking for, but judging from what you describe about having 4 sections, maybe it’s worth a try.