Menu Bar & Navbar Links Alignment

Support
#1

Hi, I was wondering how I could align the navbar links and menu bar on a certain page? I want to make the navbar links and menu button for mobile a little lower on my home page than the other pages

#2

Hello Daniel,

Thanks for writing in!

Please use following CSS under X > Theme Options > CSS:

.home .masthead-inline .x-btn-navbar {
    margin-top: 50px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

What about for the mobile menu button on a specific page?

#4

Hello Daniel,

Thanks for updating the thread. :slight_smile:

In that case you will have to use page Id and menu class to make the necessary changes. Please add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
 .page-id-3321 .x-btn-navbar, .x-btn-navbar.collapsed {
    margin-top: 25px;
}
}

To find the page id, please refer following post:

Thanks.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.