Force the DIVI secondary to not merge with the mobile menu and remain even on mobile

You can force the menu items to remain visible in the secondary header on mobiles using this CSS:

@media screen and (max-width: 980px) {

#page-container {

padding-top: 0px !important;

}

#top-header {

position: static !important;

display: block !important;

}

#top-header .container {

padding-top: 0.75em !important;

}

#page-container #main-header {

position: relative !important;

top: 0 !important;

}

#top-header #et-secondary-menu,

#top-header #et-secondary-nav {

display: block !important;

}

#top-header #et-secondary-nav li {

text-align: center !important;

}

#et-main-area {

padding-top: 1px;

}

}

CSS tricks to add some creativity and flair to your website

Here are a few fun CSS tricks that you can use to add some creativity and flair to your website or web application:

Text Shadow: You can add a shadow to text by using the text-shadow property. For example:

h1 {

  text-shadow: 2px 2px #ff0000;

}

This will create a red shadow 2 pixels to the right and 2 pixels down from the text.

Gradient Background: You can create a gradient background using CSS by setting the background-image property to a linear or radial gradient. For example:

body {

  background-image: linear-gradient(to bottom, #ff0000, #0000ff);

}

This will create a gradient that goes from red to blue from top to bottom.

Animations: CSS animations allow you to add movement and interactivity to your website. You can use the @keyframes rule to define an animation and then apply it to an element with the animation property. For example:

@keyframes example {

  from {

    transform: translateX(0);

  }

  to {

    transform: translateX(100px);

  }

}

.element {

  animation: example 2s linear;

}

This will make the .element move horizontally 100 pixels to the right over the course of 2 seconds using a linear easing.

Transform: The transform property allows you to scale, rotate, and translate elements. For example:

.element {

  transform: rotate(45deg);

}

This will rotate the .element 45 degrees clockwise.

These are just a few of the many creative things you can do with CSS. I encourage you to explore more and see what kind of effects you can create!

Posted in