// Link Styles
body, html {
overflow-x: hidden;
.container {
max-width: 1120px;
}
}
a {
color: #007bff; /* Replace with your desired link color */
}
.header-image-wrapper{
.header-image{
height: 220px;
max-width: 100%;
width: 100%;
}
}
// Header Styles
#masthead {
border-bottom: solid 1px #eee;
margin-bottom:1.3rem;
padding:1rem 0;
// Site Branding (Logo and Title)
.site-branding {
h1{
margin: 0;
}
// Site Title Link
.site-title a {
font-size: 1.75rem;
text-transform: none;
margin-right: 7px;
}
// Logo Image Styling
img.custom-logo {
width: 150px;
height: 50px;
}
a{
color: #000;
text-decoration: none;
}
}
// Main Menu Styling
.menu {
a {
padding: 13px 13px;
font-size: 16px;
color: #000;
margin-right: 3px;
text-transform: capitalize;
&:hover {
color: #5f5f5f;
}
}
// Dropdown Symbol for Submenus
.menu-item-has-children::after,
.page_item_has_children::after {
content: '⮟';
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font-size: 12px;
}
}
// Submenu Styles
.main-navigation {
width: 100%;
justify-items: end;
ul {
flex-wrap: wrap;
justify-content: left;
ul {
display: inline-block;
position: absolute;
background: #fff;
// Submenu Link Styling
a {
display: inline-flex;
padding: 0.75rem 1rem;
// Responsive Styles for Submenu Links
@media (max-width: 968px) {
display: block;
padding: 0.5rem 0.75rem;
font-size: 1rem;
}
}
// Dropdown Symbol Rotation for Submenus
.menu-item-has-children::after,
.page_item_has_children::after {
content: '⮟';
position: absolute;
top: 50%;
transform: rotate(270deg) translateY(-50%);
right: 8px;
font-size: 12px;
}
}
}
}
// Menu Toggle Button for Mobile
.menu-toggle {
background: none;
border: none;
width: 60px;
img {
width: 1.5rem;
height: auto;
}
}
}
.search-field {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.search-submit {
background: none;
border: none;
cursor: pointer;
margin-left: 5px;
}
.search-submit img {
width: 16px; /* Adjust as needed */
height: 16px;
}
button.wp-block-search__button.wp-element-button {
width: 80px;
}
// Social Menu Wrapper
.social-menu-wrapper {
display: flex;
justify-content: flex-end;
align-items: center;
background: #929292;
height: 2rem;
}
// Social Menu Styling
.menu-social-menu-container {
#social-menu {
ul {
display: flex;
list-style: none;
}
// Social Link Icons
a {
position: relative;
color: transparent;
display: inline-block;
width: 32px;
overflow: hidden;
// Font Awesome Icon Styles
&:after {
display: block;
font-family: "Font Awesome 5 Brands";
font-weight: 400;
font-size: 15px;
position: absolute;
top: 0;
}
// Specific Social Media Colors
&[href*="twitter.com"]:after {
content: "\f099";
color: #00aced;
}
&[href*="github.com"]:after {
content: "\f09b";
color: black;
}
&[href*="linkedin.com"]:after {
content: "\f0e1";
color: #007bb6;
}
// Additional social icons can be added here
}
}
}
// Override for Icon Colors in Social Menu
.menu-social-menu-container #social-menu a:after {
color: #fff !important;
padding: 3px 9px;
border-radius: 50%;
}
// Hide Search Form on Small Screens
@media (max-width: 992px) {
.search-form {
display: none;
}
}
// Hover Effect Transition Style
div:hover:before {
transform: scaleY(1);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}