Search blog posts

[lostinspace]

I worked with what you suggested and changed the CSS to:

#content {
padding-top: 50px !important;
background-color: #e5e5e6;
min-height: 880px;
margin-top: 30px !important;
position: relative;
}

This made all my pages work beautifully on all devices EXCEPT on cell phones the gap between the header and the first article seems to have increased.  Any idea why that would occur?   See:  https://www.hvpi.net/articles-of-interest/

[scrambler]

First, there is no need to use both padding and margin for the space. If you want 80px total space, leave the padding at zero, and make the margin 80px

The space on mobile is because of a mobile rule they have in there.
@media (max-width: 992px){
.wvrx-posts{
padding-top: 239px !important;
}}

I have no idea why they did that, may be you remove some content.
In any case, you can just remove the whole rule.

[lostinspace]

That worked except it partially hides the next/previous navigation between posts behind my header (only on cells).  I dislike that navigation, but it seems necessary for now until I find another way to navigate posts.

[scrambler]

I don’t see any navigation at the top, only at the bottom. If it is on a different page, please provide a link

I also noticed there are more mobile rules we need to remove (below)

@media (max-width:850px){
.entry-content, .entry-summary {
/* padding: 1.0em 0 0 !important; */
/* margin: 0 !important; */
/* padding-top: 183px !important; */
}
}
@media (max-width:768px){
.entry-content, .entry-summary {
/* padding: 1.0em 0 0 !important; */
/* margin: 0 !important; */
/* padding-top:92px !important; */
}
}

 

[scrambler]

OK, I saw the navigation

The real problem, is that the way they moved the menu down is not good as it is not responsive and a bit of a mess.

I can help you redo it properly but it may take a few back and forth

First, go to Main Options > Menus > Primary Menu bar > Fixed Top > And set it to standard: Not fixed

Next remove the rules below
.is-menu-default .wvrx-menu>li{
top:228px !important;
}

@media (max-width:1030px){
.is-menu-default .wvrx-menu>li {
top: 194px !important;}
}

Next, remove the top line in the rule below
.is-menu-default .wvrx-menu>li {
display: block;
float: left;
width: 31.8%;
margin: 4px;
background-color: #007F7F;
border: solid 1px #125ca6;
position: relative;
top: 293px;
z-index: 99999;
}

making it
.is-menu-default .wvrx-menu>li {
display: block;
float: left;
width: 31.8%;
margin: 4px;
background-color: #007F7F;
border: solid 1px #125ca6;
position: relative;
z-index: 99999;
}

Next add the rules below to the top of theme Global Custom CSS Rule box
#header {position:relative;}
#nav-primary {position:absolute;bottom:-35px;}

This will make sure the bottom of the menu stays is place when the browser gets smaller.

Post back for residual issues

[lostinspace]

I think that I followed your directions correctly, but now on cell my site has lost its main navigation.  The only direction I’m not sure of is the last one you gave:

#header {position:relative;}
#nav-primary {position:absolute;bottom:-35p<wbr />x;}

Did you mean for that to be the first rule in the CSS rules?

[scrambler]

This has nothing to do with what we have done.
You appear to have the menu set to be hidden on mobile
I am finding more and more weird stuff, they really did a number on your site, lots of convoluted things that did not need to be.

Go to Main options > menu > Primary menu bar > Hide area and set it to show on all devices

Go to Main Options > Header > Site title and tagline and set both of them to hidden on all devices as you don’t seem to show them.

But something is preventing the menu to switch to mobile. Do you know if you are using a plugin that display its own mobile menu?

I am am starting to fear that it is going to be very complicated to figure out all they have done

[scrambler]

They basically did not bother to learn the theme options, and brute forced everything they wanted with CSS, instead of using the theme options.

For example, they used the rules below to hide the title and tagline, instead of using the theme options to hide them (as I asked you to do on my last post)
.wrapper #site-title a, .wrapper .site-title a {
color: #FFFFFF !important;
display: none !important;
}

#site-tagline {
margin-left: 7.25000% !important;
margin-top: 3.00000% !important;
display: none !important;
}

So once you have selected the hide on all devices options for the title and tagline, these rules can be deleted.

But what I cannot figure out is what they did for the mobile menu.

Normally the theme menu switches to mobile automatically, but that does not seem to be working. The fact they apparently had set the primary to be hidden on mobile (which I asked you to undo) makes me think they used an alternate mobile menu, but I don’t know why it is not showing.

Check if you have a plugin that creates a mobile menu, (like the jetpack option), and if so deactivate that.

If we can restore the theme mobile menu, we will need to tweak the rules that created the 9 boxes.

If we cant figure it out, we may have to restore your old version and limit our changes to the strict minimum.

[lostinspace]

Given the fact that I have taken up so much of your time (for which I am SO grateful) and the fact that our small business is essentially closed for the time being I’m wondering if I should just start fresh and create a new site.  Although I have no real knowledge of CSS I have become fairly well acquainted with the basics of Weaver Xtreme.  I’m assuming that I can develop a new site while keeping the existing one running for now.  I would hire you in a minute to do this for us, but I suspect that is not something that you do.  What do you think?

[scrambler]

This depends entirely on whether you are mostly happy with the current design or not, and whether you have time and interest in creating a design of your own.

If you are mostly happy with the design and don’t really have time and interest in creating a new site, given you don’t have urgency on the existing site, I am happy to try and clean it up with you.

If you have interest in recreating the site and would like to make changes, then recreating a new site would allow you to gain full understanding of the theme and be in full control of its maintenance. I am equally happy to help you through that 🙂

Let me know

And you are right, I don’t do work for hire, but I am happy to help on my spare time (which I have a good amount 🙂 )

[lostinspace]

You are very kind and thoughtful.  I will opt for tweaking the existing site.  My two concerns are getting the navigation functioning on cell screens and creating a searchable system for my “articles of interest” (a blog that is really more of a library).  I know that I can use categories and tags to organize, but I want to make it really simple for folks to find articles that they are interested in.  I installed the “search and filter” plugin but wasn’t happy with the look of it and it was doing a full site search rather than searching just the articles.

I don’t see a plugin specifically for mobile by the way.

[scrambler]

Ok let us start, and be aware that as we start cleaning up, some of the menu position may get messed up temporarily until we adjust the CSS.

Hide title in Main options > Header > Site title / Tagline > Hide site title  > Hide on all devices

In the same section, uncheck Move Title /Tagline over header image (that will likely mess up the menu position until I can adapt/correct the custom CSS)

Set Main options > Header > Hide search on header > Hide on all devices

Paste here the content of Theme Help > Your System and configuration info box, using the copy to clipboard button below it

[lostinspace]

### Weaver System Info ###

— WordPress Configuration —

Site URL: https://www.hvpi.net
Home URL: http://www.hvpi.net
Multisite: No
Version: 5.4.2
Language: en_US
WP_DEBUG: Disabled
WP Memory Limit: 40M
Permalink: /%year%/%monthnum%/%day%/%postname%/
Show On Front: page
Page On Front: home page (ID# 56)
Page For Posts: (ID# 0)
Current Theme: Weaver Xtreme (3.0.3)
Post Types: post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, oembed_cache, user_request, wp_block, ctct_forms, ctct_lists, bwg_gallery, bwg_album, bwg_tag, tribe_venue, tribe_organizer, tribe_events, tribe-ea-record, deleted_event, tt_font_control, ml-slider, wcs_slide

— Weaver Xtreme Configuration —

Weaver Xtreme Version: 3.0.3
Theme Support Version: 3.1

— Server Configuration —

Operating System: Linux
PHP Version: 7.3.22
MySQL Version: 5.7.23
jQuery Version: 1.12.4-wp
Server Software: Apache

— PHP Configuration —

Local Memory Limit: 256M
Server Memory Limit: 256M
Post Max Size: 260M
Upload Max Filesize: 256M
Time Limit: 30
Max Input Vars: 1000
Display Errors: N/A

— WordPress Active Plugins —

Bulk Remove Pending Comments: 2
Constant Contact Forms for WordPress: 1.4.5
Disable Comments: 1.7
Easy Google Fonts: 1.4.4
Exquisite PayPal Donation: v1.0.2
MaxButtons: 8.1.2
Meta Slider: 3.3.7
PayPal Buy Now Button: 1.7.1
PayPal Payment Buttons: 1.0.5
Photo Gallery: 1.3.21
Search & Filter: 1.2.12
The Events Calendar: 4.5.7
Weaver Show Posts: 1.3.9
Weaver Xtreme Theme Support: 3.1
WP Add Custom CSS: 1.0.0
WP Canvas – Shortcodes: 3.2
WP Edit: 4.0.1

— WordPress Inactive Plugins —

Akismet: 3.2
Magee Shortcodes: 1.6.3
Share Buttons by AddThis: 5.3.4
WP Clone by WP Academy: 2.2.3
WP Gallery Custom Links: 1.11

### End System Info ###

[scrambler]

OK, so here is a first cleaning pass that will restore the slide open Mobile menu. I deleted the rules that are no longer needed since you activated the proper theme options, I moved all the Menu stuff at the top with a comment label.
There are still a number of things that are likely not needed if we would use the theme options properly, But I wanted to focus on the menu first.

First make a backup of the current Custom CSS.
Go to the Custom CSS Rule Box, select all, Copy, and paste in a basic text file (like notepad on windows), and save that file

Next copy all the CSS below, then go to the CSS Rule box, select all, and paste. That should replace All the existing CSS by the one you copied below

If you prefer, you can first delete All the CSS in the CSS rule box (select all > delete), then Copy and paste the CSS from below

This will restore the slide open Mobile menu on mobile, let me know if this is not what you wanted…

To test the behavior of the site on all device, just use a desktop browser and gradually make the browser smaller to observe the changes in layout.

One question.

When the browser gets smaller, at some point the text in the 9 menu boxes is too large to fit.
I fine tuned the CSS to it would scale better, but for the text to fit, it makes the text smaller
Should the text in the 9 boxes shrink wrap on multiple lines instead?

Next let me know what you believe are the changes you still need.

New CSS to replace the existing one is below

/* Partially revised CSS from Scrambler */

#header {position:relative;}
.is-desktop #nav-primary {position:absolute;bottom:-35px;}
/* menu related CSS */
ul.wvrx-menu {
margin-left: 38%;
}

.is-desktop .wvrx-menu>li {
display: block;
float: left;
width: 31.8%;
margin: 4px;
background-color: #007F7F;
border: solid 1px #125ca6;
position: relative;
z-index: 99999;
}

.menu-primary .wvrx-menu > li > a {
color: #ffffff !important;
text-align: center;
line-height: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.menu-primary .wvrx-menu > li > a:hover {
text-decoration: underline !important;
background-color: #a52a2a !important;
}

.menu-primary .wvrx-menu-container {
background: none !important;
}

.menu-primary .wvrx-menu > li > a{
font-size:15px !important;
padding-right: 4px;
padding-left: 4px;
}

@media (max-width: 767px) {
ul.wvrx-menu {
margin-left: 0%;
}
.is-menu-default .wvrx-menu>li {
width: 100%;
background:#007F7F;
}
}

@media (max-width: 1065px){
.menu-primary .wvrx-menu > li > a {
font-size: calc(6px + .5vw) !important;}
}

@media (min-width:768px) and (max-width: 1280px){
.is-menu-default .wvrx-menu>li{
width: 27.8% !important;}
}

.weaverx-theme-menu .current_page_item > a,
.weaverx-theme-menu .current-menu-item > a,
.weaverx-theme-menu .current-cat > a {
font-weight: 500 !important;
}

/* end of menu CSS */


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
line-height: 1.42857143 !important;
color: #333 !important;
background-image: none !important;
margin-top: 0px !important;
}

.box-green {
background-color: #007f7f;
}

.box-green img {
float: left;
margin-right: 14px;
margin-top: 0px;
margin-left: 11px;
}

.box-green h2 {
font-size: 23px;
color: #40E0D0;
padding: 12px 0px 24px 17px;
line-height: 35px;
font-weight: 600;
}

@media (min-width: 1200px) {
.l-content-rsb {
width: 63%;
}
}

@media (min-width: 1200px) {
.l-sb-left,
.l-sb-right,
.l-sb-left-split,
.l-sb-right-split {
width: 35%;
}
}

.professional-text h3 {
font-size: 15px;
line-height: 21px;
color: rgb(230, 230, 250);
margin-left: 11px;
}

@media (max-width: 768px) {
.professional-text h3{
text-align: center !important;
}
.professional-text h4{
text-align: center !important;}
}

.professional-text h4 {
margin-left: 11px !important;
font-size: 16px;
font-weight: 200;
line-height: 27px;
color: rgb(230, 230, 250);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.professional-text h5 {
text-align: center !important;
font-size: 16px;
font-weight: 200;
line-height: 27px;
color: rgb(230, 230, 250);
}

.professional-text p {
font-size: 16px;
color: rgb(230, 230, 250);
margin-top: 30px;
text-align: center !important;
line-height: 30px;
}

.socal ul li {
list-style: none;
padding: 0px 0px 0px 90px;
}

.articles_of_interest {
margin-top: 40px;
}

.articles_of_interest a:hover {
background: #0e0e0e;
border: #020202 solid 1px;
color: #000;
text-decoration: none;
}

.articles_of_interest a {
background: #00466e;
border: #fff solid 1px;
color: #f3a800;
font-size: 20px;
text-align: center;
margin: auto;
text-decoration: none;
transition: all 0.3s ease-in-out;
padding: 14px 42px;
margin: auto;
display: table;
}

.logo-footer img {
padding: 47px 0px 0px 19px !important;
}

.new-12 a {
font-size: 20px;
color: #d39e2e;
}

.new-12 {
padding: 40px 0px 0px 14px;
}

p {
font-size: 14px;
margin-bottom: 39px;
}

.container-page .content {
float: right !important;
}

.container-single .content {
float: right !important;
}

a {
color: #B79033;
text-decoration: none;
}

.p .a {
color: #B79033;
text-decoration: none;
}

h1 {
font-size: 36px;
font-weight: 700;
}

h2 {
font-size: 30px;
font-weight: 700;
}

h3 {
font-size: 24px;
font-weight: 600;
}

.open-session h1 {
font-size: 30px;
font-weight: 700;
font-size: 30px;
font-weight: 700;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.open-session h3 {
font-size: 26px;
font-weight: 400;
}

.open-session em {
font-size: 20px;
}

body.page-id-22 .entry-content h2 {
font-weight: 500 !important;
}

body.page-id-22 .entry-content h3 {
color: #0000ff;
font-size: 27px;
font-weight: 500;
}

.person-name h3 {
font-size: 14px;
}

.go-back-bio h3 a {
font-size: 15px;
font-weight: 500;
color: #B79033;
}

body.page-id-10 h4 a {
color: #B79033;
}

.meta-info-wrap {
display: none !important;
}

.wrapper .post-title a {
color: #007f7f !important;
text-decoration: none;
font-weight: 500;
font-style: inherit;
font-size: 23px;
}

.category .post {
background: #f7f7f7;
padding: 10px 25px 0 25px;
min-height: 230px;
margin-top: 25px;
}

.single-post .post img {
margin: auto;
float: inherit;
display: table;
}

#comments {
display: none !important;
}

.category .content {
float: right !important;
}

#breadcrumbs {
padding-left: 15px;
display: none !important;
}

.page-header {
padding-bottom: 0px;
margin: 0px 0 0px;
border-bottom: 0px solid #eee;
}

.is-mobile #wrapper {
margin-left: auto !important;
margin-right: auto !important;
background-color: #007f7f !important;
}

#header {
background: none !important;}

#colophon {
background-color: #F0F0F0;
display: none;
}

#primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px !important;
z-index: 99999;
}

#container,
#content,
.post-area {
overflow: inherit;
}

.home h1 {
font-size: 34px;
font-weight: 300;
}

@media (max-width: 768px) {
.welcome-text h1 {
margin-top: 0px !important;
}
}

@media (max-width: 768px) {
.l-content-rsb {
width: 100%;
}
}

@media (max-width: 768px) {
.l-sb-left,
.l-sb-right,
.l-sb-left-split,
.l-sb-right-split {
width: 100%;
}
}

@media (max-width: 768px) {
.space-cover {
margin-top: -0px !important;
}
}

@media (min-width: 768px) {
.l-content-rsb {
width: 64% !important;
margin-right: 2%;
}
}

@media (min-width: 768px) {
.l-sb-left,
.l-sb-right,
.l-sb-left-split,
.l-sb-right-split {
width: 35% !important;
}
}

.page-title {
font-size: 1.875em;
font-weight: bold;
padding-bottom: 0px;
line-height: 0px;
margin-top: -56px !important;
display: none !important;
}

body.page-id-12 h2 a {
color: #B79033;
}

body .container-page {
margin-top: inherit !important;
}

body .container-category {
margin-top: -270px;
}

body .container-single {
margin-top: -270px;
}

#container {
background: none !important;
}

@media(max-width:767px) {
body .container-page {
margin-top: 0;
}

#content {
padding-top: 0;
}
#content {
min-height: inherit;
}
body .container-category {
margin-top: 0;
}
body .container-single {
margin-top: 0;
}
#infobar {
display: none;
}
}

.entry-content .entry-title {
clear: both;
}

.single-post .post .wvrx-fi-link {
display: none;
}

h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !impotant;}

h2{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;}

h3 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;}

h4 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !imporant;}

h5 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !imporant;}

h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !imporant;}

p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;}

.page-id-56{
margin-top: 0px !important;}

#inject_fixedbottom, .wvrx-fixedtop, .wvrx-fixonscroll{
position:absolute !important;
}
#wrapper .wvrx-fullwidth.wvrx-fixedtop, #wrapper .wvrx-expand-full.wvrx-fixedtop, #wrapper .wvrx-fullwidth#inject_fixedbottom, #wrapper .wvrx-expand-full#inject_fixedbottom{
margin-left:inherit !important;
padding-left:0px !important;
left: -29px !important;
}

.page-header{
margin-top:0px !important;
}

@media (min-width: 768px){
.l-sb-left-lm, .l-sb-right-lm, .l-sb-right-split-lm {
width: 34% !important;
margin-left: 1%;}
}

.font-bold a {
font-weight: inherit !important;
}

.category-articles-of-interest #primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px;
z-index: 99999;
}

@media (max-width: 768px){
.category-articles-of-interest #content {
margin-top: 0px!important;}
}

.single-post #primary-widget-area{
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: -165px;
z-index: 99999;}

.single-post #content {
margin-top: 0px;
margin-top: 244px;
}


.wrapper #site-title a, .wrapper .site-title a {
color: #FFFFFF !important;
display: none !important;
}

#site-tagline {
margin-left: 7.25000% !important;
margin-top: 3.00000% !important;
display: none !important;
}


#content {
padding-top: 50px !important;
background-color: #e5e5e6;
min-height: 880px;
margin-top: 30px !important;
position: relative;

}

@media (max-width: 768px){
#content {
padding-top: 63px !important;
background-color: #e5e5e6;
margin-top: -50px !important;
position: relative;
min-height: 0px !important;}
}

#content {
padding-left: 18px !important;
padding-right: 8px !important;
}

@media (max-width:767px){
#content{
padding-top: inherit !important;
margin-top: inherit !important;
margin-right: inherit !important;}
}




@media (min-width:768px){
#wrapper {
margin-left: auto !important;
margin-right: auto !important;
background: linear-gradient(90deg, #007f7f 35%, #e5e5e6 33%);
background-color: #007f7f !important;
webkit-box-shadow: 0 0 10px 6px rgba(0,0,0,.3);
box-shadow: 0 0 10px 6px rgba(0,0,0,.3);}
}

.single-post .entry-content, .entry-summary{
padding: 1.0em 0 0;
margin: 0;
padding-top: 0px !important;}





@media (max-width: 768px){
.is-menu-default .wvrx-menu>li {
top: 10px !important;}
.header-image-type-std{
height: auto;
max-width: 100%;
}
}

@media (min-width:768px) and (max-width:992px){
.page-template-default #wrapper {
margin-left: auto !important;
margin-right: auto !important;
background: linear-gradient(90deg, #007f7f 34%, #e5e5e6 34%) !important;
background-color: #007f7f !important;
webkit-box-shadow: 0 0 10px 6px rgba(0,0,0,.3);
box-shadow: 0 0 10px 6px rgba(0,0,0,.3);}
}

@media (max-width: 660px){
#branding #header-image img{
visibility:hidden!important;
}
#branding #header-image{
background-image: url("http://www.hvpi.net/wp-content/uploads/2016/12/85.png") !important;
height: 133px;
width: 100%;
background-size: 100% 100%;
top: 32px !important;
}
}

@media (max-width: 768px){
.box-green h2{
display: none !important;}
}

@media (max-width: 768px){
.single-post .entry-content .entry-summary .entry-summary{
padding-top: 44px !important;
}}

@media (max-width: 768px){
.logo-1 img{
display: none !important;}

}

@media (max-width: 768px){
#primary-widget-area {
position: relative;
z-index: 10;
padding: 0;
margin: 0;
margin-top: 0px !important;
z-index: 99999;}
}

.post-template-default .page-header {
margin-top: 0px !important;
}

@media (max-width: 768px){
.post-template-default .page-header {
margin-top: 20px !important;
}
}

@media (max-width: 768px){
.professional-text h5{
text-align: center !important;
}
.professional-text p{
text-align: center !important;}
}

.logo-footer{
margin: auto;
display: table;}

.new-12 {
text-align: center !important;
margin-top: 30px !important;
}

@media (max-width: 992px){
.single-post #primary-widget-area{
margin-top: 133px !important;
}}

[lostinspace]

I probably won’t get to this until Saturday.  Actually getting out of the house tomorrow.  Thank you again for all your amazing efforts on my behalf!

[lostinspace]

I realized how quick it was to install your update.  It works on all sizes.  I’ll write again on Saturday.  Off to sleep.

[Author]

Posts