I have login and Register page but the nav and the footer appears on all page. I dont know how to make the nav and footer not to appear in the login and register page. In Next 12, i usually…
I am new to Flutter development and I am having trouble creating a scrollable list within the header and footer area of the screen. The header and footer data will be fixed, while the list will be scrollable. I have…
I am trying to create a layout that looks like this I can get the screen split in two halves down the middle, and something on the right hand side vertically centered. However, when i try to nest a flexbox…
My layout is not obeying my commands. I had trouble with a layout so I created a new basic box with sub-boxes to see what's going on, and no matter what I do the two 300px boxes won't fit side-by-side…
I am trying to create a rotated shape layout using CSS. However, when I rotate the parent <div> with transform: rotate(45deg), the text and icons inside the div also rotate. To counteract this, I attempted to apply an inverse rotation…
Here's a screenshot of what I'm seeing. How to restore the basic layout of vs code. Accidentally the sidebar and menu bar is hidden. I am unable to access anything. Please help me out from this issue. I did not…
the text work fine on one device but on other screens the text is messy so please help me to reduce scale of this container i want to make it run on all screens like this image image preview example…
I have this weird border all around my header: It's written in html and css, the relevant source code is below: HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Killa Media</title> <link rel="stylesheet" href="style.css"> </head> <body>…
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.
I need to make a table like in the screenshot: What result did I get: Problem: I can't make a green border like in the screenshot for the "registered" column. Q: How can I make this border if it's a…