Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Pull content beneath navigation bar and add button

Featured Lock Resolved Task
Hi,

I'd like to have the first section of all the pages appear behind the navigation, as shown in the screen shot. I also need to have the button as part of the navigation. I was trying to do this through the page builder but could not find a way.

Is there a way to set this?

Thank you,

Karen

Attachments (1)

  • navbar-content.jpg
    navbar-content.jpg 245.8 KB

8 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your reply. Please check this screencast from this link https://bit.ly/2DdhFPx
Here is the css code

#sp-header {
background: transparent !important;
position: absolute;
left: 0;
top: 37px;
}
#sp-menu .sp-column {
display: flex !important;
flex-direction: row-reverse !important;
align-items: center !important;
justify-content: center !important;
}
.call-mod p {
margin: 0;
padding: 5px 10px;
background: aliceblue;
margin-left: 20px !important;
}

Here is the css class which i've added call-mod

-Best Regards

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. Sorry there is no default feature like that. But you can use your custom css to get that look easily.
You can share your site url here thus i can check that.


-Best Regards

Karen Dunne

More than a month ago #Permalink
Thank you for replying quickly Sifat.

URL: http://mavendesignstudio-demo.com/sppage/

I currently have the navigation enabled via Helix and I started a section below it in an attempt to get things to work.

There is a module that I'm trying to use that will ultimately be a button but right now it's just text. When that module is assigned to the menu position, it knocks the actual menu below it.

Is there any other information that I can provide?

Thank you,

Karen

P.S. I appreciate the prompt response. I'm am trying Joomshaper for the first time in an interest to move away from YooTheme Pro.

Karen Dunne

More than a month ago #Permalink
Perfect, thank you Sifat. I have that incorporated now. I appreciate the help. This will get me going the rest of the way I think.

Cheers,

Karen

Sifat - Staff

More than a month ago #Permalink
You are always welcome :)

icedk

One week ago #Permalink
Hi,
Thanks for your reply. Please check this screencast from this link https://bit.ly/2DdhFPx
Here is the css code

#sp-header {
background: transparent !important;
position: absolute;
left: 0;
top: 37px;
}
#sp-menu .sp-column {
display: flex !important;
flex-direction: row-reverse !important;
align-items: center !important;
justify-content: center !important;
}
.call-mod p {
margin: 0;
padding: 5px 10px;
background: aliceblue;
margin-left: 20px !important;
}

Here is the css class which i've added call-mod

-Best Regards

It's perfect code, it just lacks color now it's in sticky position

Sifat - Staff

5 days ago #Permalink
Glad to know it helped you.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 133
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 92
Toufiq

Toufiq

Total Accepted Answers: 24
Pavel

Pavel

Total Accepted Answers: 4
Al Mamun

Al Mamun

Total Accepted Answers: 3

113

Templates

289626

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us