Rockwell_77

Keep that change you just made and then try:

Under: .main-menu ul ul {

…change: display: block;
to: display: none;

I fixed the big a while back but sort of forgot exactly what I did. Try this:

Below the following code in styles.css : .main-menu ul li:hover ul {

…add the following:
display: block;

Here’s a video illustrating the issue:

I might try to make the menus not open on a hover. It seems like a good possible solution. I’d prefer to get the hover menu working properly, but that seems like it might be more difficult.

Here’s a good article about hover menus: https://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

I’m thinking I need to look at the following code in the style.css file:

/* nav-toggle */

	.nav-toggle {
		display: block;
		padding: 12px 12px 10px;
		border-radius: 3px;
		position: absolute;
		top: 50%;
		margin-top: -16px;
		right: 0;
	}

	.nav-toggle .bars {
		height: 10px;
		width: 15px;
		float: right;
		position: relative;
		margin-top: -1px;
	}

	.nav-toggle .bar {
		width: 15px;
		height: 2px;
		background: #767676;
		border-radius: 2px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.nav-toggle .bar:nth-child(2) { top: 4px; }
	.nav-toggle .bar:nth-child(3) { top: 8px; }

	.nav-toggle p {
		font-size: 14px;
		line-height: 10px;
		font-weight: 700;
		text-transform: uppercase;
		text-align: right;
		color: #767676;
		float: left;
		margin-right: 8px;
		position: relative;
		top: -1px;
	}

	.nav-toggle .close { display: none; }

	.nav-toggle:hover { cursor: pointer; }

	.nav-toggle.active { background: #019EBD; }
	.nav-toggle.active p { color: #fff; } 

	.nav-toggle.active .bar { background: #fff; }

	.nav-toggle.active .bar:nth-child(1),
	.nav-toggle.active .bar:nth-child(3) { top: 4px; }

	.nav-toggle.active .bar:nth-child(2) { opacity: 0; }

	.nav-toggle.active .bar:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.nav-toggle.active .bar:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

Just not sure how to fix this issue.

You want to look at this code in the style.css file:

.post-nav:before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	margin: 20px 0;
	background: #ddd;
}

You want to change the width from 32px to 100%.

The style.css file that you should be editing starts like this:

/*---------------------------------------------------------------------------------

	Theme Name: Radcliffe
	Version: 1.09
	Description: A theme for bloggers who want their content to take center stage. Radcliffe features responsive design, retina-ready assets, full width header images, beautiful design and typography, support for custom logo, support for custom accent color, three widget areas, editor style and translation-ready code. Included translations: Swedish/svenska.
	Tags: gray, white, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready, editor-style
	Author: Anders Norén
	Author URI: https://www.andersnoren.se
	Theme URI: https://www.andersnoren.se/teman/radcliffe-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: https://www.gnu.org/licenses/gpl-2.0.html

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (https://www.gnu.org/licenses/gpl-2.0.html)

-----------------------------------------------------------------------------------

	0.	CSS Reset
	1.	Document Setup
	2.  Structure
	3.	Header
	4.	Navigation
	5.	Main Content
	6.  Single Post
	7.	Post Content
	8.	Comments
	9.	Pagination
	10.	Page & Page Templates
	11.	Footer
	12.	Credits
	13. Media Queries

----------------------------------------------------------------------------------- */

My solution is only for full/larger images in <i>posts</i>.

I’m not sure exactly what you want to do since the Radcliffe theme already has full width pictures on the home/main/index page. The home page is a listing of recent posts with full page photos of the featured images for each post.

Also, it appears that, if you want to do what I did, you are editing the wrong css file. You should be editing the main Radcliffe style.css in the Radcliffe theme folder. If you do that, you can enter the code .section-inner.wide { width: 100%;} in any blank spot in the css. If you do this, be sure to save the css file and reload the page. Also, another tip after you make these changes is to clear your browser cache for your webpage. I am not entirely sure, but it might be the case that css files are cached (saved to your computer) and so, if you update or change the css file that is stored online, your browser might still be using the old css file that is stored on your computer instead of the new one. Clearing the cache for your page will force your browser to access the new/updated css file since the old one is deleted when you clear the cache.

You may omit the <p> and </p> in your posts. WordPress adds them automatically. I have them there because I use a plugin that disables WordPress from automatically inserting them (since I want control over where and when they appear).

Here is the template I saved for making new posts:

<p>
<!-- TEXT HERE -->

</p>

<p><!-- TEXT HERE -->

</p>
<br>
</div>

<div class="post-content section-inner wide">
<!-- IMAGES HERE -->

</div>

<div class="post-content section-inner thin">
<p>TEXT HERE</p>
<p>MORE TEXT HERE.</p>
<br>
<div class="post-content section-inner wide">
<!-- IMAGES HERE -->

</div>

In the styles.css file, I added the following line:

.section-inner.wide { width: 90%;}

You can change the width to 100% if you want full width images.

Then, when making the post, I only use the WordPress html editor like this:
1. write the text of your post
2. use the </div> command to exit the narrow formatted division
3. use <div class="post-content section-inner wide"> to start a division where your full-screen images will go.
4. insert your images after this code
5. at the end of the last image, use `</div> to exit this type of formatting
6. reopen the original formatting division by typing <div class="post-content section-inner thin">
7. write additional text for your post if you like

The above seems to work well for me.

Remember, whenever you want to insert images, you need to create a <div class="post-content section-inner wide">, place your images in it, and then close the division with a </div>.

Let me know if you got it to work.

OK…probably not the best way to do this, but I think I have made it work with some brute force.

I am able to do this as follows:

• after the post text where I want to insert an image, I added a </div> tag, to get me out of the section.inner.thin division, defined in the css as 740px.
• I then created a custom <div> class in the css, defining it by the width I want my images to be (I called it.section-inner.wide and gave if the following: { width: 90%;}
• in the post where I want my images to be, I created a new div with the class created in the above step
• after the image(s), I closed the div with </div>
• I then inserted a div with the class of the post content text (.section-inner.thin { width: 740px; }) in order to return the width to that specified div width

OK…it doesn’t exactly work. I am sure this is due to my lack of understanding of the document structure.

I am pretty sure I need to look at these elements:

.section { padding: 100px 0; }

.medium-padding { padding: 80px 0; }
.light-padding { padding: 50px 0; }
.small-padding { padding: 30px 0; }
.no-padding { padding: 0; }

.bg-grey { background: #f1f1f1; }

.section-inner {
	width: 1300px;
	max-width: 84%;
	margin: 0 auto;
}

.section-inner.medium { width: 1040px; }
.section-inner.thin { width: 740px; }

And maybe I will need to modify the page.php file as well?

Will try to play around with things in the meantime. If anyone understand this better I would appreciate the help. ??

My guess is to change this in the css:

.section-inner.thin { width: 740px; }

…to width: 100%, then create two separate custom div settings for the post content text width and post content image width?

Could the space in the directory name be the problem (seems to result in a broken link here on this board)? This wouldn’t make sense since the image sometimes does load.