We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

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

Your Time: Our Time:

Blog page eats into the top menu bar!

Featured Lock Resolved Issue
Hi,

I changed my blog page to have NO sub title. This removes the word "Blog". It also causes the blog to extend into the TOP MENU bar, so it looks really weird!
See website
http://www.elxlee.com/index.php/blog

Please tell me how to set it, such that blog comes in ONLY below the top menu bar, and not eat into the menu bar?

Attachments (1)

  • Screen Shot 2020-02-15 at 7.44.47 PM.png
    Screen Shot 2020-02-15 at 7.44.47 PM.png 623.6 KB

12 Answers

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Ok. If you want both sides down then delete my previous code and put this custom css

.view-category #sp-main-body {
padding-top: 180px;
}

And please let me know is it alright or not
Thanks

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Maybe you enable the sticky header that's why the header sticky and it's going under the menubar. If you do not want it then just disable the sticky header
http://prntscr.com/r2ozbu
Check it if it does not work then give me the problem of your screenshot. But I hope it will solve your issue.
-Best Regards
Mehtaz

El Lee

More than a month ago #Permalink
Hi,
Maybe you enable the sticky header that's why the header sticky and it's going under the menubar. If you do not want it then just disable the sticky header
http://prntscr.com/r2ozbu
Check it if it does not work then give me the problem of your screenshot. But I hope it will solve your issue.
-Best Regards
Mehtaz


I am unable to find this stick header button you show. It looks like Helix framework, while I am using SP Page builder here?

You can see in attached screenshot, my setting is to turn off page title. Then the contact, in terms of the blog moves up and INTO the top menu bar. The Top menu bag should take priority and the blog content should APPEAR BELOW the menu bar, NOT inside/within the menu bar.

please advise me.

Attachments (1)

  • xx.png
    xx.png 346.7 KB

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
Try this custom css

#sp-header.header-sticky{
position: unset !important;
z-index: 0 !important;
}

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

El Lee

More than a month ago #Permalink
It doesn't solve the issue. The blog content still eats into the top menu bar. see screenshot, or the demo site
http://www.elxlee.com/index.php/blog

Attachments (1)

  • Screen Shot 2020-02-15 at 11.10.13 PM.png
    Screen Shot 2020-02-15 at 11.10.13 PM.png 129.2 KB

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Eat means??? Sorry, I do not understand your problem. Do you want it like this screenshot below?
http://prntscr.com/r2qyfn
Then use this css

.article-list .article{
position:relative;
top:100px;
}

Thanks

El Lee

More than a month ago #Permalink
your screenshot is correct. However, the "Popular Post" on the right hand side needs to be move down as well, how do I achieve that?

El Lee

More than a month ago #Permalink
How do i apply the same setting for other pages, like the contact form page?
http://www.elxlee.com/index.php/appointment

The form need to be brought down similarly by 180px like what you did for the article page.

Attachments (1)

  • Screen Shot 2020-02-16 at 12.12.24 AM.png
    Screen Shot 2020-02-16 at 12.12.24 AM.png 119.9 KB

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Hi,
For article page use this custom css

div#column-id-1568624889098 {
padding-top: 180px;
}

Thanks

El Lee

More than a month ago #Permalink
The custom css helps. On the same page for BLOG, how do i adjust or remove the elements on the right side. It is not same height as left side.

For example that orange yellow image which says "When It comes to client" is irrelevant to my website, so I would like to either remove or amend to another image. Where can I locate or adjust the right column image and element?

http://www.elxlee.com/index.php/blog

See attached.

Attachments (1)

  • right side.png
    right side.png 234.9 KB

Mehtaz Afsana Borsha - Staff

More than a month ago #Permalink
Use this custom css for removing right side part

.sp-module.popular-post-v1{
display:none;
}
div#column-wrap-id-1568971607483{
display:none;
}
.sp-module.themis-blog-categories {
position: relative;
bottom: 57px;
}

Thanks


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

123

Templates

327349

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