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?
banner
CSSWordPress

Avatar of undefined
Last Comment
thenelson

8/22/2022 - Mon
Terry Woods

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.

thenelson

ASKER
Would that be in the theme editor section?

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

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.

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
thenelson

ASKER
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 Woods

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

thenelson

ASKER
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;
}
}
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
thenelson

ASKER
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 Woods

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.

thenelson

ASKER
Yes, I did.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Terry Woods

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Terry Woods

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

thenelson

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