Customising the design of the header

[emjay89]

Hi,

I’m quite new to web-design so sorry if this doesn’t make sense. I’m wondering how I customise the design of the header. Currently it defaults to Baskerville logo with Poppins links and I want to customize the CSS so I can change the font but also have a colour behind the links (which ideally, would change when I hover over them). Can someone please assist?

[SeaTheme]

Hi there,
Welcome to SeaTheme forum.

Please go to Fonts Management > Fonts Definition, define your own font. Add the font to HTML element on Fonts Management (check more) > Fonts Assignment

but also have a colour behind the links (which ideally, would change when I hover over them)

I don’t understand this question.
If you only want to change text color, please go to Air Theme > Theme Options > Colors(check more). If it is not what you want, please give me more tips(better paste a screenshot). Thanks

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[emjay89]

Thanks for your response. How do I paste a screenshot??? I don’t see anywhere to insert an image…

[SeaTheme]

Welcome
You can use a 3rd cloud like Dropbox to share your image files.

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[emjay89]

I’ve included in Example 1 what I’m trying to achieve. Do you know how I can do this?

Examples here

I have another question. I’ve created an image gallery and I need the individual images in the gallery to link to different pages of my website, but I can’t see any straightforward way to do this. I can only do it If I upload an individual image, not a gallery. Can you please help (Please look at Example 2 to see what I mean)

[SeaTheme]

Thanks for your screenshots. It is possible to add BG color by custom CSS(“Appearance > Customize: Additional CSS”), like:

.navi-header li.menu-item a  { 
    background-color: #cccccc;
    padding: 2px;
}
.navi-header li.menu-item a:hover, 
.navi-header li.menu-item a:focus { /*for mouseover*/
 background-color: #333333;
}

2. Please open WordPress media library, edit the images of selected in the gallery(check how to create portfolio video guide at 5:00), add custom URL.(check number 3 of below screensho)

Please make sure the “Open custom URL” option is selected for “What Thumbnail Does“(Grid module , Advanced setting)

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[emjay89]

Hi again,

I’m trying to simply add text and links to my footer but I can’t seem to find where to do this. I go to AirTheme>Theme Options>Footer But this only seems to have options for adding a logo etc. I want to achieve something close to Example 3

Can you please advise?

Regards

WIP is http://www.mattjack.me

[SeaTheme]

Hi,

Please use “Text” option for the footer element:

If you want to edit HTML format, please refer to the codes format:

<strong>Contact</strong>
<div>We are  asdf  asdfas fasdf asdf</div>

<strong>Social</strong>
<ul>
<li><a href="https://www.facebook.com/xx">Facebook</a></li>
<li><a href="https://twitter.com/xx">Twitter</a></li>
</ul>

And make sure the footer layout options, each element will show as one column:

Please paste the custom CSS code to “Appearance > Customize: Additional CSS” to make the elements align on top:

.footer-cols-layout .footer-info > .container-fluid { 
    align-items: flex-start;
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[emjay89]

Thanks. I have another question. I’m having issues putting text alongside a gallery. See example 4 It worked fine above it… but I can’t seem to replicate it. Can you please assist? Web page is https://mattjack.me/go-to/.

Also, I’d like to keep the red underline in my footer, but remove it from the 2 buttons on my header. Can you help?

[emjay89]

Another question – how do i increase the size of my header buttons in the hamburger menu. See example 5

Also – how do I make my social links align with the rest of the footer. I want “Contact” to line up with “I would” Example 6

[SeaTheme]

Hi, welcome.

example 4:
I don’t understand this question. The screenshot of example 4 is NOT the same as the go-to page(https://mattjack.me/go-to/). Please give me more tips. Do you want to know how to duplicate a module?

To remove red-line from the 2 buttons on my header, paste the custom CSS code to “Appearance > Customize: Additional CSS” :

.navi-header a, .menu li > a { 
    text-decoration: none;
}

example 5:
Did you talk about the menu icon(hamburg icon), please define the icon height here:

example 6:
Please paste the custom CSS code to “Appearance > Customize: Additional CSS” :

@media (max-width: 991.98px) {
  .responsive-ux .footer-cols-layout-mobile .footer-info > .container-fluid { 
    align-items: flex-start;
 }
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts