I've installed this template and I'm just starting to get this going. I have found that the Mobile version of the template shifts the Logo Image down 60px and so it's covering the slideshow.

The site is dev.kofc11207.org/ You can use Google Inspect tools to view it in mobile.

The image shifts down. From what i can tell it's from the element <div class="uk-navbar-content uk-navbar-center uk-visible-small"> not sure what line it is but in the theme.css file line 2067 has the CSS which states:
.uk-navbar-content, .uk-navbar-brand, .uk-navbar-toggle {
box-sizing: border-box;
display: block;
height: 60px;
padding: 0 15px;
float: left;
}

when I remove height: 60px within the google tools the image shifts back up and is great. I don't want to mess with files I shouldn't be messing with especially if I remove the height and screw something else up in the template. So, can anyone explain why this is there and perhaps help me figure out how to remove it without messing up everything else?

Add this css code to your css/custom.css

.uk-navbar-center {
max-width: 90%;
}

Sorry for my ignorance, but I don't have a custom.css file in /css folder. Or under Styles/<my layout>/css. I viewed source on the page and there is a call for this file: <link rel="stylesheet" href="css:custom.css">

No idea where that could be. Do I create the file? If so, where? Perhaps I should look again at the documentation, it's probably in there.

I found that I have to add the custom.css file to /css. so that is there. I added the code and it didn't fix my problem.

But I did change the code to this and it works:

.uk-navbar-center {
height: 0px;
max-width:70%
}