Fixed Navigation Bar

I mean similar with this website: https://www.bebasbayar.com/

Hey @rakalhikmah. This can be done with some custom CSS. Under Customize > Additional CSS, you can add the following code:

/* Fixed header */

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0px 0px 50px #ddd;
}

If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

what about if i want to make the navigation bar in the same logo line ?
what css code can i use ?
https://salepair.binrush.com

Hey @nani93 – I wouldn’t really suggest to work with CSS on that one. It’s possible, but using Storefront Powerpack will make that a lot easier.

If you still want to work with custom CSS, I’d advise you to have a look at CSS Flexbox which will likely be the easiest way to get this done, but “easiest” here doesn’t mean “easy”.

am sorry, wanted to inform you that the code didn’t work
am using this code
@media (min-width: 768px) {
.storefront-primary-navigation>.main-navigation {
float: right !important;
margin-right: 0 !important;
width: 100% !important;
}
.main-navigation ul.menu,
.main-navigation ul.nav-menu {
text-align: right !important;
}
.storefront-primary-navigation>.main-navigation>.menu>ul>li {
text-align: right !important;
}
.main-navigation ul.menu>li:first-child,
.main-navigation ul.nav-menu>li:first-child {
margin-left: 0;
}
.main-navigation ul.menu>li:last-child,
.main-navigation ul.nav-menu>li:last-child {
margin-right: -1em;
}
}
to make the navigation bar in the right side because it was below the logo in the left side

Hi @nani93 – that CSS id not doing the same as what I posted higher up. When testing my code on Storefront core without extras, it did the job. The CSS you’ve proposed just focuses on having the navigation outline on the right. While it’s nice CSS, it’s not addressing the issue reported in this thread. Please start new threads if the topics are not related. Thanks!

I would however make a small change and add the following:

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    box-shadow: 0px 0px 50px #ddd;
}

@media (min-width: 768px) {
    .home .site-main,
    .storefront-breadcrumb {
        margin-top: 9em;
    }
}

The result is this:

Link to image: https://cld.wthms.co/l0JrZ1

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.