Help with customizing menu header in Fortune template - Forum | JoomShaper
Solved Templates

Help with customizing menu header in Fortune template

Asked by Hector 5 years ago Last activity 5 years ago

Hi there,

I need some help to customize the menu header in the Fortune template please.

My website is https://staging.aprendemindfulness.org

This is what I am trying to achieve:

  1. I would like the menu to be displayed to the right.

  2. I want the content blocks to automatically start below the menu, regardless of the device of the user. Right now, depending on the device, there is a gap between the menu and the first block.

See this screenshot: https://imgur.com/a/xLvK3mm

  1. I need the menu to not have a translucid background like it is right now.

See this screenshot: https://imgur.com/a/dzCI1Mq

Many thanks!
Hector

Accepted answer

Marked as the solution
Pavel
5 years ago · edited

Hi Hector.
1

#sp-menu > .sp-column {
    justify-content: flex-end;
}

2

/*Correct this in your custom.css file on line 37*/
.body-innerwrapper {
    padding-top: 100px;
}

3 Part of the code from Mehtaz (only this)

#sp-header.header-sticky{
  background-color: white !important;
}

3 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
5 years ago · edited

Hi,
Use this custom css

#sp-header.header-sticky{
  background-color: white !important;
}
@media (min-width: 1024px){
div#sp-menu {
    position: relative !important;
    left: 325px;
}
}

Add this css code inside the custom.css file.
Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
Thanks

Hector Asked this
5 years ago

Thank you very much Mehtaz and Pavel! =)

Mehtaz Afsana Borsha Staff
5 years ago

You are most welcome

Log in to reply.