wordpress-theming Questions

Does rtl.css break headers when activated in a WordPress theme?

May 13, 2023
JOMV
2 Answers

I have installed shift WordPress theme. When I change the site to Right to Left, the header is messed up. social icons, search icon and search form are not in right place. menu is messed up and goes to wrong position.

Theme Name: Shift
Theme URI: https://www.competethemes.com/shift/

Below is the rtl.css provided in the theme:

.site-title a, .site-footer a {
  color: white;
}
.site-title a:link, .site-footer a:link, .site-title a:visited, .site-footer a:visited, .site-title a:hover, .site-footer a:hover, .site-title a:active, .site-footer a:active, .site-title a:focus, .site-footer a:focus {
  color: white;
}

.further-reading a, .post-categories a, .post-meta a, .pagination a, .comment-pagination a, .comment-footer .comment-edit-link,
.comment-footer .comment-reply-link {
  font-style: italic;
}
.further-reading a:hover, .post-categories a:hover, .post-meta a:hover, .pagination a:hover, .comment-pagination a:hover, .comment-footer .comment-edit-link:hover,
.comment-footer .comment-reply-link:hover, .further-reading a:active, .post-categories a:active, .post-meta a:active, .pagination a:active, .comment-pagination a:active, .comment-footer .comment-edit-link:active,
.comment-footer .comment-reply-link:active, .further-reading a:focus, .post-categories a:focus, .post-meta a:focus, .pagination a:focus, .comment-pagination a:focus, .comment-footer .comment-edit-link:focus,
.comment-footer .comment-reply-link:focus {
  text-decoration: underline;
}

.post-header,
.post-content,
.after-post-meta, #disqus_thread, .comments, .error404 .search-form-container {
  margin: 1.5em 4.41543%;
}

.search-header, .pagination, .archive-header {
  padding: 1.5em 4.41543%;
  background: #E6E6E6;
}

@media all and (min-width: 56.25em) {
  .post-header,
.post-content,
.after-post-meta, #disqus_thread, .comments, .error404 .search-form-container {
    margin: 1.5em 6.83142%;
  }

  .search-header, .pagination, .archive-header {
    padding: 1.5em 6.83142%;
  }
}
/*===== Basic Styles =====*/
/* apply a natural box layout model to all elements */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  height: 100%;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  background: #F2F2F2;
  color: #1A1A1A;
  -webkit-font-smoothing: subpixel-antialiased;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
}

.overflow-container {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 100%;
}

.loop-container:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

p {
  margin: 1.5em 0;
}

a {
  color: #1A1A1A;
  text-decoration: none;
}
a:link, a:visited {
  color: #1A1A1A;
}
a:hover, a:active, a:focus {
  color: #1A1A1A;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

h4, h5, h6 {
  font-size: 1em;
  line-height: 1.5;
}

ul,
ol {
  font-size: 1em;
  padding: 0;
  margin: 1.5em;
}
ul ul, ul ol,
ol ul,
ol ol {
  margin: 0 1.5em;
}

ul ul,
ol ol,
ul ol,
ol ul,
li li {
  font-size: 1em;
}

/* Markup styles */
pre {
  word-wrap: break-word;
  background: #F2F2F2;
  white-space: pre-wrap;
  padding: 0.75em;
}

code {
  background: #F2F2F2;
  padding: 0 0.375em;
}

pre code {
  padding: 0;
}

blockquote {
  margin: 1.5em 0 1.5em 1.5em;
  padding-right: 1.5em;
  border-right: solid 3px #1A1A1A;
}
blockquote cite {
  display: block;
  text-align: left;
}

hr {
  margin: 1.5em 0;
}

/* Table styles */
table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 1.5em 0;
}

td,
th {
  padding: 0.75em;
  border: solid 1px #1A1A1A;
}

.wp-block-table {
  margin: 0;
}
.wp-block-table thead,
.wp-block-table tfoot {
  background: #F2F2F2;
}
.wp-block-table td,
.wp-block-table th {
  border-color: #E6E6E6;
}
.wp-block-table figcaption {
  margin: -18px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-block-table.is-style-stripes {
  border-bottom: none;
}
.wp-block-table.is-style-stripes thead {
  background: none;
}
.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
  border-color: #E6E6E6;
}

/* Images */
.alignleft {
  float: right;
  margin: 0 0 1.5em 1.5em;
}

.alignright {
  float: left;
  margin: 0 1.5em 1.5em 0;
}

.aligncenter {
  text-align: center;
  margin: 1.5em auto;
  display: block;
}

.alignnone {
  margin: 1.5em 0;
}

img,
.alignright,
.alignleft,
.aligncenter,
.alignnone,
.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail,
.wp-block-image {
  max-width: 100%;
  height: auto;
}
img figcaption,
.alignright figcaption,
.alignleft figcaption,
.aligncenter figcaption,
.alignnone figcaption,
.size-auto figcaption,
.size-full figcaption,
.size-large figcaption,
.size-medium figcaption,
.size-thumbnail figcaption,
.wp-block-image figcaption {
  margin: 3px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-caption-text,
.gallery-caption,
.wp-caption-dd {
  margin: 3px 0 0 0;
  color: #1A1A1A;
  text-align: center;
}

.wp-block-social-links a {
  color: #fff;
}

.wp-block-group.alignwide,
.wp-block-group .alignwide,
.wp-block-group.alignfull,
.wp-block-group .alignfull {
  line-height: 1.5;
}

/* Form styles */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=tel],
input[type=url],
textarea {
  width: 100%;
  font-family: "Lato", sans-serif;
  padding: 10px 12px;
  max-width: 27.75em;
  min-height: 42px;
  background: #F2F2F2;
  color: #1A1A1A;
  border: solid 2px #E6E6E6;
  border-radius: 0;
  -webkit-appearance: none;
  transition: background 0.2s, border-color 0.2s;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=url]:focus,
textarea:focus {
  outline: none;
  background: white;
  border-color: #CCCCCC;
}

textarea {
  max-width: 41.625em;
  overflow: auto;
  /* to hide scrollbar in IE */
}

input[type=submit] {
  font-family: "Lato", sans-serif;
  padding: 12px;
  color: white;
  background: #1A1A1A;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: background 0.2s;
}
input[type=submit]:hover {
  cursor: pointer;
}
input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus {
  background: #4D4D4D;
}

input[type=search] {
  padding-left: 0.375em;
  /* so safari 'x' doesn't get cut off */
}

::-webkit-input-placeholder {
  color: #666666;
}

:-moz-placeholder {
  color: #666666;
}

::-moz-placeholder {
  color: #666666;
}

:-ms-input-placeholder {
  color: #666666;
}

/* ie image border fix */
a img {
  border: none;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
  html {
    -webkit-text-size-adjust: none;
    /* none for no scaling */
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  html {
    -webkit-text-size-adjust: none;
    /* none for no scaling */
  }
}
.screen-reader-text {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
}

.skip-content {
  position: absolute;
  top: -100%;
  width: 100%;
  right: 0;
  display: block;
  text-align: center;
  color: white !important;
  z-index: 99;
  padding: 1.5em;
  background: #1A1A1A;
  transition: top 0.2s ease-in-out;
}
.skip-content:focus {
  top: 0;
  outline: none;
}

.admin-bar .skip-content:focus {
  top: 32px;
}

.max-width {
  max-width: 1340px;
  margin: 0 auto;
}
.max-width:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.max-width.main-max-width {
  min-height: calc(100vh - 150px);
}

@media all and (min-width: 50em) {
  h1 {
    font-size: 2.375em;
    /* 38px / 16px */
    line-height: 1.342;
    /* 51px */
  }

  h2 {
    font-size: 1.75em;
    /* 28px / 16px */
    line-height: 1.357;
    /* 38px */
  }

  h3 {
    font-size: 1.3125em;
    /* 21px / 16px */
    line-height: 1.143;
    /* 24px */
  }

  h4 {
    font-size: 1.125em;
    /* 18px / 16px */
    line-height: 1.333;
    /* 24px */
  }

  h5, h6 {
    font-size: 1em;
    line-height: 1.5;
  }
}
.archive-header {
  margin-bottom: 1.5em;
}
.archive-header h1 {
  font-size: 1em;
  line-height: 1.5;
}

.more-link {
  display: inline-block;
  color: white;
  background: #1A1A1A;
  padding: 9px 12px;
  transition: color 0.2s, background 0.2s;
}
.more-link:link, .more-link:visited {
  color: white;
}
.more-link:hover, .more-link:active, .more-link:focus {
  color: white;
  background: #4D4D4D;
}
.more-link:hover i, .more-link:active i, .more-link:focus i {
  left: -1px;
}
.more-link i {
  display: inline-block;
  position: relative;
  left: 0;
  margin-right: 3px;
  vertical-align: middle;
  transition: left 0.2s;
}

.post-content .more-link {
  text-decoration: none;
}
.post-content .more-link:hover, .post-content .more-link:active, .post-content .more-link:focus {
  color: white;
}

.more-link-wrapper {
  margin: 1.5em 0;
}

.sticky-status {
  padding: 1px 5px;
  border: solid 2px #E6E6E6;
  color: #666666;
  display: inline-block;
  margin-bottom: 3px;
}

.comment-respond {
  margin: 3em 0;
}
.comment-respond label {
  display: block;
  margin-bottom: 6px;
}
.comment-respond p {
  margin: 1.125em 0;
}
.comment-respond p.comment-notes {
  margin: 1.5em 0;
}
.comment-respond p.form-submit {
  margin-top: 2.25em;
}
.comment-respond .comment-form-cookies-consent label {
  display: inline-block;
}

.comments {
  margin-top: 3em;
}

.comments-number {
  margin: 1.5em 0 3em;
}
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 2.25em 0;
}

.comment-list .children {
  padding-right: 1.5em;
  border-right: solid 1px #F2F2F2;
}

.comment-author {
  margin-bottom: 1.5em;
}
.comment-author .avatar {
  width: 36px;
  height: auto;
  float: right;
  margin-left: 6px;
  border-radius: 50%;
}
.comment-author .author-name {
  line-height: 36px;
}
.comment-author .author-name a {
  font-style: italic;
}
.comment-author .author-name a:hover, .comment-author .author-name a:active, .comment-author .author-name a:focus {
  text-decoration: underline;
}

.comment-content ul,
.comment-content ol {
  margin: 1.5em;
}
.comment-content ul ul,
.comment-content ul ol,
.comment-content ol ul,
.comment-content ol ol {
  margin: 0 1.5em 0 0;
}

.comment-footer .comment-edit-link,
.comment-footer .comment-reply-link {
  position: relative;
  padding-right: 9px;
  margin-right: 4px;
}
.comment-footer .comment-edit-link:before,
.comment-footer .comment-reply-link:before {
  content: "|";
  position: absolute;
  right: 0;
  top: 0;
}

li.comment,
li.pingback {
  margin-bottom: 2.25em;
}
li.comment.bypostauthor > article,
li.pingback.bypostauthor > article {
  border: solid 4px #E6E6E6;
  padding: 0.75em;
}

.comment-pagination {
  margin: 1.5em 0;
}
.comment-pagination p {
  display: inline-block;
  margin: 0 0 0 -4px;
  width: 50%;
}
.comment-pagination .next-comment {
  float: left;
  text-align: left;
}
.comment-pagination:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

@media all and (min-width: 50em) {
  .comments-number h2 {
    font-size: 1.3125em;
    /* 21px / 16px */
    line-height: 1.143;
    /* 24px */
  }
}
.site-footer {
  clear: both;
  margin-top: 3em;
  background: #1A1A1A;
  color: #CCCCCC;
  text-align: center;
}
.site-footer .design-credit {
  padding: 0.75em 6.9425%;
}
.site-footer a {
  text-decoration: underline;
}

.scroll-to-top {
  position: fixed;
  bottom: -45px;
  left: 0;
  z-index: 9;
  background: #1A1A1A;
  border: none;
  color: #fff;
  padding: 12px 0;
  width: 60px;
  transition: background 0.2s, transform 0.3s;
}
.scroll-to-top.visible {
  transform: translateY(-45px);
}
.scroll-to-top:hover {
  cursor: pointer;
  background: #4D4D4D;
}
.scroll-to-top:hover i {
  transform: translateY(-4px);
}
.scroll-to-top i {
  font-size: 21px;
  transition: transform 0.2s;
}

/**
 * 14.2 Galleries
 */
.gallery {
  margin: 2.25em auto;
}

.gallery-item {
  display: inline-block;
  padding: 0.75em;
  text-align: center;
  vertical-align: top;
  width: 100%;
  margin: 0;
}
.gallery-item img {
  max-width: 100%;
  max-height: 100%;
}
.gallery-item a {
  border: none;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-icon img {
  margin: 0 auto;
}

.gallery-caption {
  display: block;
  font-size: 12px;
  padding: 0.5em 0 0;
  margin: 0;
}

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none;
}

/* Jetpack Galleries */
.tiled-gallery {
  margin: 2.25em auto !important;
}
.tiled-gallery .gallery-row {
  margin: 0 auto;
}

.site-header {
  background: white;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
}
.site-header:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.title-container {
  position: relative;
  display: inline-block;
  background: #1A1A1A;
  padding: 1.125em 6.9425% 1.125em 1.5em;
  min-height: 60px;
}
.title-container.has-tagline {
  padding-top: 9px;
  padding-bottom: 9px;
}

.site-title {
  display: inline-block;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
}
.site-title a {
  text-decoration: none;
  transition: color 0.2s;
}
.site-title a:hover, .site-title a:active, .site-title a:focus {
  color: #E6E6E6;
}

.tagline {
  color: #E6E6E6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.social-media-icons {
  list-style: none;
  margin: 1.5em 0 0.75em;
  transition: opacity 0.2s;
}
.social-media-icons li {
  display: inline-block;
  margin-left: 20px;
}
.social-media-icons.fade {
  opacity: 0;
}
.social-media-icons a {
  transition: color 0.2s;
}
.social-media-icons a:hover, .social-media-icons a:active, .social-media-icons a:focus {
  color: #666666;
}

.logo {
  max-width: 100%;
  width: 200px;
  height: auto;
}

@media all and (min-width: 56.25em) {
  .title-container {
    float: right;
    z-index: 19;
    padding-left: 2.25em;
    margin-left: 2.25em;
  }
  .title-container:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: -999px;
    z-index: -1;
    background: #1A1A1A;
  }

  .social-media-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5.554%;
    margin: 0;
  }
  .social-media-icons li:last-child {
    margin-left: 0;
  }
}
@media all and (min-width: 68.75em) {
  .site-header {
    margin-bottom: 0.75em;
  }
}
.pagination {
  text-align: center;
  clear: both;
  margin-bottom: 3em;
}
.pagination a {
  transition: color 0.2s;
}
.pagination .prev,
.pagination .next {
  position: relative;
}
.pagination .prev {
  float: right;
  margin-right: 0;
  padding-right: 10px;
}
.pagination .prev:before {
  content: "«";
  position: absolute;
  right: 0;
}
.pagination .next {
  float: left;
  margin-left: 0;
  padding-left: 10px;
}
.pagination .next:after {
  content: "»";
  position: absolute;
  left: 0;
}
.pagination a,
.pagination span {
  margin: 0 0.75em;
}
.pagination a.current,
.pagination span.current {
  font-weight: 700;
}

@media all and (min-width: 37.5em) {
  .pagination {
    position: relative;
  }
  .pagination.prev, .pagination.next {
    position: absolute;
  }
  .pagination.prev {
    right: 0;
  }
  .pagination.next {
    left: 0;
  }
}
.main {
  margin: 1.5em 2.777%;
}

@media all and (min-width: 56.25em) {
  .main {
    width: 61.094%;
    float: right;
  }

  .left-sidebar .main {
    float: left;
  }

  .page-template-full-width .main {
    width: 100%;
    float: none;
    margin: 1.5em 0;
    padding: 0 2.777%;
  }
}
.toggle-navigation {
  position: relative;
  float: left;
  font-size: 1em;
  line-height: 1.5;
  background: none;
  margin: 0;
  border: none;
  padding: 1.125em 1.5em 1.125em 6.9425%;
}
.toggle-navigation:after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 32px;
  border: solid 1px #CCCCCC;
  visibility: hidden;
}
.toggle-navigation svg {
  display: inline-block;
  vertical-align: middle;
}
.toggle-navigation svg g {
  fill: #1A1A1A;
}
.toggle-navigation:hover svg g, .toggle-navigation:active svg g, .toggle-navigation:focus svg g, .toggle-navigation.open svg g {
  fill: #666666;
}
.toggle-navigation:hover {
  cursor: pointer;
}
.toggle-navigation:focus, .toggle-navigation.open {
  outline: none;
}
.toggle-navigation:focus:after, .toggle-navigation.open:after {
  visibility: visible;
}

.menu-primary-container {
  background: white;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}
.menu-primary-container .menu-inner-container {
  position: relative;
  padding: 1.5em 6.9425%;
  min-height: 1.5em;
}
.menu-primary-container.open {
  max-height: none;
}

.menu-primary ul {
  margin: 0;
  list-style: none;
}
.menu-primary li {
  margin-bottom: 0.75em;
}
.menu-primary li.current-menu-item > a, .menu-primary li.current_page_item > a, .menu-primary li.current-menu-ancestor > a {
  font-weight: 700;
}

/* Tier 2 */
.menu-primary ul ul {
  max-height: 0;
  overflow: hidden;
  margin-right: 1.5em;
}
.menu-primary ul ul li:first-child {
  margin-top: 0.75em;
}
.menu-primary ul ul li:last-child {
  margin-bottom: 0;
}
.menu-primary .open > ul {
  max-height: none;
}
.toggle-dropdown {
  top: 0;
  font-size: 1em;
  padding: 3px 6px;
  margin: 0;
  border: none;
  background: none;
}
.toggle-dropdown i {
  transition: top 0.2s;
  top: 0;
  left: 0;
}
.toggle-dropdown:hover {
  cursor: pointer;
}

@media all and (min-width: 56.25em) {
  .toggle-navigation {
    display: none;
  }

  .toggle-dropdown {
    font-size: 14px;
    padding: 0;
    margin-right: 3px;
    vertical-align: middle;
  }

  .menu-primary-container {
    position: relative;
    max-height: none;
    overflow: visible;
    height: 60px;
    z-index: 9;
  }
  .menu-primary-container .menu-inner-container {
    position: relative;
    padding: 0 3em 0 5.554%;
    top: 50%;
    transform: translateY(-50%);
  }

  .menu-primary .open > ul {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary li {
    display: inline-block;
    margin: 0 0 0 20px;
  }
  .menu-primary li:hover > a:after {
    transform: scale(1);
  }
  .menu-primary li:hover > button i {
    top: 2px;
  }
  .menu-primary a {
    position: relative;
    font-size: 0.75em;
    line-height: 1.5;
  }
  .menu-primary a:after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    height: 2px;
    width: 100%;
    background: #E6E6E6;
    transform: scale(0);
    transition: transform 0.2s;
  }
  .menu-primary a:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 4px;
    right: 0;
    width: 100%;
  }
  .menu-primary a:hover:after, .menu-primary a:active:after, .menu-primary a:focus:after {
    transform: scale(1);
  }

  /* Tier 2 */
  .menu-primary {
    /***** Tier 2 *****/
  }
  .menu-primary ul ul {
    position: absolute;
    z-index: 19;
    top: calc(100% + 4px);
    max-height: none;
    overflow: visible;
    background: white;
    margin-right: 0;
    padding: 0 0.75em 1.125em;
    right: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    border-top: solid 2px #E6E6E6;
    min-width: 5em;
    transition: opacity 0.2s, visibility 0.2s, top 0.2s, right 0.2s;
  }
  .menu-primary ul ul:hover, .menu-primary ul ul.focused {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary ul ul li {
    white-space: nowrap;
    margin: 0 0 6px 10px;
  }
  .menu-primary ul ul a {
    width: 100%;
  }
  .menu-primary li {
    display: inline-block;
    margin: 0 0 0 10px;
  }
  .menu-primary li.menu-item-has-children {
    position: relative;
    /***** Tier 3+ *****/
  }
  .menu-primary li.menu-item-has-children > a:hover ~ ul, .menu-primary li.menu-item-has-children > a:active ~ ul, .menu-primary li.menu-item-has-children > a:focus ~ ul {
    opacity: 1;
    visibility: visible;
    top: calc(100% - 2px);
  }
  .menu-primary li.menu-item-has-children > a:hover + button i, .menu-primary li.menu-item-has-children > a:active + button i, .menu-primary li.menu-item-has-children > a:focus + button i {
    top: 2px;
  }
  .menu-primary li.menu-item-has-children ul li {
    display: list-item;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children:hover button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children:active button i {
    left: -2px;
    top: 0;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children button i {
    transition: left 0.2s ease;
    margin-right: 3px;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:before {
    top: 0;
    bottom: 0;
    right: 100%;
    height: 100%;
    width: 36px;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:hover ~ ul, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:active ~ ul, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:focus ~ ul {
    opacity: 1;
    visibility: visible;
    top: -12px;
    right: 100%;
  }
  .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:hover + button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:active + button i, .menu-primary li.menu-item-has-children ul .menu-item-has-children > a:focus + button i {
    top: 0;
    left: -2px;
  }
  .menu-primary li.menu-item-has-children ul ul {
    top: -12px;
    right: calc(100% + 4px);
  }
  .menu-primary li.menu-item-has-children ul ul:hover, .menu-primary li.menu-item-has-children ul ul.focused {
    top: -12px;
    right: 100%;
  }
}

The problem is only with header. All other parts looks fine.
When I apply some fixes like

#menu-primary {
  padding-right: 0 !important;
    
}
.social-media-icons {
  text-align: left !important;

    
}


@media all and (max-width: 899px) {

  .site-header .search-form-container button.open + form {
    left: 0 !important;
  }
}
@media all and (min-width: 900px) {

  .search-form-container {
    right: auto !important;
    margin-top: 3px;
  }
}

menu positions moves to correct position but, cannot click menu, hyperlink point is below the text. Search icon and social icon moves to left, but when clicked to search icon, search for is not displaying correctly, it overlaps the search icon and goes out of the page from left. I wonder how can I fully fix this.

VIEW QUESTION

Can WordPress run an animation only the first time you visit a website?

May 13, 2023
vanoevelenstef
2 Answers

I have a logo that popups on the homepage, after you clicked on it, you can go further on the website (I have got that working splendidly). But when visiting another page and going back to the index page, the…

VIEW QUESTION

Adding prefix to WooCommerce order number – WordPress

April 20, 2023
JPI
0 Comments

Im trying to add custom prefix to woocommerce order number that can be changed. for example 23-19980 23 = year -1 = batch number 9980 = order number I did manage to find a code snippet that can make me…

VIEW QUESTION

how can i make the free theme as my homepage? – WordPress

April 20, 2023
10k
0 Comments

How can I make this my static homepage https://example.com/ ? Currently, it is not a page because I cannot see an "edit page" when I am logged in the Wordpress backend. Is there a way that I can make it…

VIEW QUESTION

May I ask how can I align the excerpt and button in wordpress elementor blog grid please?

April 17, 2023
Nicola Hoo
2 Answers

Since my blog posts Title and excerpt have different length and the excerpt and read more buttons are not aligned to the top of the sentence. May I ask how can I align the excerpt and button in blog grid…

VIEW QUESTION

Gutenberg block CSS does not apply to preview in template parts editor – WordPress

April 4, 2023
EinLinuus
2 Answers

I'm trying to add support for template parts to my WordPress theme. I have a block with a stylesheet and a script and everything works fine. However, in the template part editor (Design -> Template parts), my styles are loaded…

VIEW QUESTION

Align button at the bottom in Advanced Post widget – WordPress

March 22, 2023
Sam Ricc
2 Answers

I am creating a page with the Advanced Post widget but am unable to align the Read More button at the bottom of the column. I am trying the below code but it's not working .pp-post-excerpt { margin-bottom: 55px; }…

VIEW QUESTION

Unexpected token ')' While Trying To Dynamically Display Button On WordPress Page – Html

March 19, 2023
Talha
2 Answers

I'm building a WordPress blog. I faced an issue so I wrote below JavaScript code just so I can hide the element according to the text it has. If element don't have any text, It should be hidden. If it…

VIEW QUESTION

Auto Fit inner div grid to outer column and row height with CSS

I have an image gallery that is overflowing its containing div. I have tried various solutions to no avail. What CSS code approach will fit the grid to the fixed-height outer div, including making each image with caption automatically resize/scale…

VIEW QUESTION

Simplify if statement? – PHP

March 5, 2023
Andy
4 Answers

What's a good way to reduce or simplify the following php function to check the applicable input field? <?php $options = get_option( 'navbar_style', '' ); $right = $left = $fade = ''; if( isset( $options['style'] ) ) { if( $options['style']…

VIEW QUESTION