Link to home
Create AccountLog in
Avatar of thenelson
thenelson

asked on

Wordpress banner overlaps

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?
User generated image
Avatar of Terry Woods
Terry Woods
Flag of New Zealand image

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%;
}

Open in new window


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%;
  }
}

Open in new window


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.

Avatar of thenelson
thenelson

ASKER

Would that be in the theme editor section?

Here is what is in that (see attached file).
ee-divi-file.txt

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.

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

Thanks for your help.

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/)

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;
}
}
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.

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.

Yes, I did.
ASKER CERTIFIED SOLUTION
Avatar of Terry Woods
Terry Woods
Flag of New Zealand image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account

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

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