How can I keep the navbar fixed at the top of the site,
So that it should always display at the top of the site after scrolling down also.
You may try Bootstrap “fixed-top” class, see https://getbootstrap.com/docs/4.0/components/navbar/#placement.
Thanks
I have manually change the header.php as
You may use jQuery in order to add the certain css class and/or remove the unwanted class. You may put that code in “Startup Script” under the “Client Scripts” section of the related page.
Fixed top is working by the following jquery at the Global->Startup Script
$(‘.main-header’).addClass(‘fixed-top’);but the top portion of the content are overlap with navbar header.
how can remove this overlap
What did you mean by “the top portion of the content”?
mobhar wrote:
What did you mean by “the top portion of the content”?it means the content header where the CurrentPageheading() is showing
As the navbar was fixed on top by the class “fixed-top”
it overlap the content header and the site is unable to see the Currentpageheading
That section does not support fixed top; only Navbar (header) that supports fixed top position.
The class where I add the fixed top is
I use the command $('.main-header').addClass('fixed-top');I am unable to solve the issue to fixed my header with navbar in the top. With the above command the navbar header is fixed but it overlap the content pagePlease kindly help with code.Thanking You.Bishu wrote:
the header is fixed now but I have use a notification script from help at the global->all
pages->Page_FootThen post your code for more discussion.
mobhar wrote:
Bishu wrote:
the header is fixed now but I have use a notification script from help at the
global->all
pages->Page_FootThen post your code for more discussion.
The Page foot code is -
Double check your code. Why did you add below the closing tag?
mobhar wrote:
Double check your code. Why did you add below the closing
tag?I have remove the and use the code
$(‘.main-header’).addClass(‘fixed-top’);but still the navbar header is overlap.
Bishu wrote:
but still the navbar header is overlap.Because you changed manually the navbar class as follows:
So, please change it back to the original one just like used by the demo project:
If you change it back to the original one, then your overlap issue should be resolved now.it might be late but:
I have manually change the header.php as
Thanks for the help.
now it is working fine with all the page.But when I activate the “Use cookie policy” option from the Advance settings
a message comes at the top of the page as “Use this space to summarize your privacy and cookie use policy” and a Accept Button.1) This cookie accept policy is overlap with the “main-header” while making it “fixed-top” and my user are unable to click the Accept Button.2) I want to use cookies policy but I want to show message for accept to my user.
for that you can move the cookie policy into the content area of the site by using jquery.
SO paste this code in global startup scripts.//move cookie policy div into content area
$(“#cookie-consent”).prependTo(“.content-wrapper”);
//remove margin left so it fit exactly
$(“#cookie-consent”).attr(“style”,“margin-left: 0px”);the regenerate footer page
After making Header and footer Fixed using the class = “fixed-top” and class = “fixed-bottom”
how can I change or adjust the height of the content-wrapper without using the paddingMeans If I increasing the height of the header/footer then it should automatically adjust the content-wrapper according to fit the remaining space of Header and footer.
Use jQuery code to re-calculate the content-wrapper height based on the changes on header and footer height.
mobhar wrote:
Use jQuery code to re-calculate the content-wrapper height based on the
changes on header and footer height.That is a great idea -
var htmlHeight = $(‘html’).innerHeight();
var headerHeight = $(‘nav’).outerHeight();
var footerHeight = $(‘footer’).outerHeight();
var remainingSpace = htmlHeight - footerHeight - headerHeight;
$(‘.wrapper’).css(‘min-height’, remainingSpace);
$(‘.wrapper’).css(‘padding-top’, headerHeight);
$(‘.wrapper’).css(‘padding-bottom’, footerHeight);
$(‘.main-sidebar’).css(‘min-height’, remainingSpace - footerHeight);
$(‘.content-wrapper’).css(‘min-height’, remainingSpace);I don’t want to overlap the footer by the sidebar but unable to do.
means the sidebar height should end exactly just before the footer.