Move Site Title Above Navigation Bar

[thependletonpassport]

Hello,

My website is www.thependletonpassport.com

I would like to move an image I have above the navigation bar. Also, in the tablet/mobile view, my navigation menu is a gray bar. How can I make it transparent with a border and add text to it? I have attached a screenshot from my website so you can see what I’m referring to. I tried to attach a second image, but it won’t let me because I’m a “new user”. I can send the screenshot from another website of what I am trying to achieve if necessary.

Thanks!

Jonel

[thependletonpassport]

Here’s what I am trying to achieve. Obviously, instead of “Minimalist Baker”, I’d have mine say “The Pendleton Passport”, and I’d like my navigation menu to look like this as well.

[christian]

Hey there,

Repositioning your image would require custom development which is outside the scope of our support.

Regarding the styling of your mobile navigation, I see you already have some custom CSS.

a.x-btn-navbar {
    background: gray;
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Change gray to transparent and add border: 2px solid gray;

Making the nav’s background transparent will make your text and hamburger icon disappear since the are light colorre. Add this custom CSS to make the icon gray.

.x-icon-navicon:before, .x-icon-reorder:before, .x-icon-bars:before {
    color: gray;
}

You have this CSS for the navigation text

@media (max-width: 980px) {
a.x-btn-navbar:after {
    content: "Menu";
    text-align: center padding: 50px;
}
}

Change “Menu” to your desired text. Also put semicolon (;) after each CSS declaration. See https://www.w3schools.com/css/css_syntax.asp for more details. Then, add color: gray;

Thanks.

[thependletonpassport]

Thanks for the reply! The code worked great. I ended up just using the topbar and adding text instead of trying to move the image. Thanks again!

[jade]

You’re most welcome.