We help IT Professionals succeed at work.

Wordpress banner overlaps

thenelson
thenelson asked
on
High Priority
76 Views
Last Modified: 2020-02-25
My Wordpress banner at www.barnwellmd.com overlaps when the page is full size in a desk top (see below). How do I fix that?
banner
Comment
Watch Question

Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:

The navigation div with id "et-top-navigation" has inline style of padding-left: 365px.


On a device with width 981px (the narrowest width where the mobile menu isn't used), the padding could be reduced to 217px to prevent the wrapping you're seeing. Unfortunately that causes the nav to overlap the logo, so doesn't fix the issue.


Updating the width of the first div inside the header with classes "container clearfix et_menu_container" from width: 80% to 90% fixes the issue, but you may like to make it responsive so that it's only done where necessary. In fact, this change by itself fixes the issue without needing to touch the navigation div mentioned above.


You could target this container with CSS:


.container.et_menu_container {
  width: 90%;
}


but you may like to put it into a media query like this:


@media screen and (max-width: 1080px) and (min-width: 981px) {
  .container.et_menu_container {
    width: 90%;
  }
}


Hopefully that will solve it. The width of 80% is coming solely from the "container" class, so the above CSS should override it, having higher specificity.

CERTIFIED EXPERT

Author

Commented:
Would that be in the theme editor section?

Here is what is in that (see attached file).
ee-divi-file.txt
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:

No, generally you won't need to edit the theme files to add CSS to the site.


Usually there is a custom CSS section in the theme options for adding your own CSS. I'd expect the Divi theme to include this feature.

CERTIFIED EXPERT

Author

Commented:
Here are the Divi theme options:
divi theme options
I have programmed in about 3 dozen languages but Wordpress just doesn't make sense to me.

Thanks for your help.
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:

Apparently you just scroll to the bottom of the Theme Options page, and there should be a Custom CSS text area for you to edit (and save) (as described here: https://divicake.com/blog/how-to-add-custom-css-to-divi/)

CERTIFIED EXPERT

Author

Commented:
I found that. Here is what is in it (ther first line starts @media screen and (max-width:)

@media screen and (min-width: 981px) and (max-width: 1170px){

#logo {
    max-width: 250px!important;
}
}

@media only screen and (min-width: 981px)
{
.et-fixed-header #top-menu .menu-item-144 a, .et-fixed-header #top-menu .menu-item-144 a

.et-fixed-header #top-menu .menu-item-144 a, .et-fixed-header #top-menu .menu-item-143 a, .menu-item-381 a, .menu-item-143 a {
    background: #fff;
    color: #2268a0!important;
    text-transform: uppercase;
    font-weight: bold!important;
    line-height: 35px;
    padding: 0 10px 0!important;
    border-radius: 10px;
}


.et-fixed-header #top-menu .menu-item-381 a, .et-fixed-header #top-menu .menu-item-143 a {

color: #2268a0!important;

}

.et-fixed-header #top-menu li#menu-item-143.current-menu-item>a, .et-fixed-header #top-menu li#menu-item-381.current-menu-item>a {
    color: #2268a0!important;
}


}


a.big-button, a.icon-button, a.small-button
{
margin-top: 10px;
}

a.icon-button, a.small-button
{
font-size:15px;
}

.meditext {
line-height: 1em;
}
.roundblurb .et_pb_main_blurb_image img {
border-radius: 100%;
border: 2px solid #e1e1e1;
}
.counter .et_pb_number_counter h3 {
padding-top: 0px!important;
}
.footmedical h1 {
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
padding: 10px 0px!important;
}
.heart .et_pb_main_blurb_image img {
animation: beat .25s infinite alternate;
transform-origin: center;
}
/* Heart beat animation */

@keyframes beat {
to {
transform: scale(1.4);
}
}
.gelatine .et_pb_main_blurb_image img {
animation: gelatine 0.5s infinite;
}
.gelatine .et_pb_image img {
animation: gelatine 0.5s infinite;
}
@keyframes gelatine {
from, to {
transform: scale(1, 1);
}
25% {
transform: scale(0.9, 1.1);
}
50% {
transform: scale(1.1, 0.9);
}
75% {
transform: scale(0.95, 1.05);
}
}
.calling .et_pb_main_blurb_image img {
animation: play 1.5s ease infinite
}
@keyframes play {
0% {
transform: rotate(0deg);
}
6% {
transform: rotate(-30deg);
}
12% {
transform: rotate(0deg);
}
30% {
transform: rotate(-30deg);
}
94% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}



@media (max-width: 767px)  {

.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_description {
    margin-left: 0!important;
    width: 100%!important;
    padding: 0!important;
    margin: 0!important;
}

.et_pb_slide_0 {
margin-left: -100px!important;
}
}
CERTIFIED EXPERT

Author

Commented:
I pasted:

@media screen and (max-width: 1080px) and (min-width: 981px) {
  .container.et_menu_container {
    width: 90%;
  }
}


into the bottom of that window but it did not fix the problems.
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:

Did you force a refresh of your page to ensure your browser loads the updated CSS? ctrl-F5 (on a PC) or command-R on a mac.

CERTIFIED EXPERT

Author

Commented:
Yes, I did.
Web Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011
Commented:

Perhaps try this and we can go from there:

.container.et_menu_container {
  width: 90%;
}
#et-top-navigation {
  padding-left: 180px !important;
}
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011

Commented:

If you have any caching plugins active in your WordPress site, ensure you tell it to empty the cache too.

CERTIFIED EXPERT

Author

Commented:
That CSS code did it - thanks!!!!!!