0

I'm a novice so please excuse my ignorance.

I am working in the free astra theme. There is a customize header section. It is composed of 3 rows and 3 columns where you can add elements.

I wrote HTML, put it in one of the pre-determined placement in the template and "additional CSS" for a menu I want to span the page. My additional CSS includes !important on every line. It's not working...

    display: flex !important;
    align-items:center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content:center!important;
    border: 1px solid #000000 !important;
    height: 55px
    overflow: auto !important;
    flex: 0;
}

.nav-buttons {
    margin:5px;
}

.about-nav {
    position: absolute;
}

.programs-nav {
    position:absolute;

}

.parent-reviews-nav {
    position: absolute;
    }

.why-kids-haven-daycare {
  sition: absolute;

    
        
}

.request-a-tour {
    position: absolute;
    }

.contact-nav {
    position: absolute;
}

.careers-nav {
      position: absolute;
}

Am I doing something incorrectly?

I'm hoping I don't have to setup a child theme since I don't know PHP yet.

creativewebdame
  • 45
  • 3
  • try to write more specific selectors to over right the existing ones. This basically works because, every selector has its own numerical 'weight': `100 points for IDs` `10 points for classes and pseudo-classes` `1 point for tag selectors and pseudo-elements` `Note: If the element has inline styling that automatically wins (1000 points)` – JDawwgy Jul 15 '22 at 21:29
  • Happy to help, if you use the dev inspector to see which classes are currently tied together to set the styles you can get a pretty good idea of what you might need to use as your own selector – JDawwgy Jul 15 '22 at 21:35

0 Answers0