hi there,
is there a way to have the logo displayed below the navigation in icon?
i did it with the help of a slider (with the logo) above masthead. but that has some disadvantages.
also. can i display a different logo for the mobile version?
thanks a lot! kai
Hi @iTurtle,
Thank you for reaching out to us. To do first go to Theme Options > Header > Logo and Navigation > Layout and select Stacked then create a new file _navbar.php and paste the following code inside:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================
$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();
?>
<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>
<div class="x-navbar-wrap">
<div class="<?php x_navbar_class(); ?>">
<div class="x-navbar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
</div>
</div>
</div>
</div>
<div class="x-logobar">
<div class="x-logobar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_brand' ); ?>
</div>
</div>
</div>
<?php else : ?>
<div class="x-navbar-wrap">
<div class="<?php x_navbar_class(); ?>">
<div class="x-navbar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_brand' ); ?>
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
Save the file and using FTP upload it to /x-child/framework/legacy/cranium/headers/views/global/ directory in your child theme. If you don’t see folders then create them to match the exact path.
- For a different logo on mobile devices please follow https://theme.co/apex/forum/t/make-a-different-logo-for-mobile/4908/2
Hope this helps!
hi @Nabeel,
wow. that worked perfectly!
also the different logo for mobile screens.
now something even more difficult probably:
can the logo be on top and the nav below (like it was before) only for the mobile version?
hope this is not asking too much… thanks again! best wishes, kai
Hello Kai,
By default, the order of the logo and the navigation depends on how it is loaded on the page. This is why in @Nabeel’s code, the navigation is displayed first and then the logo. In the original code, the logo is displayed first.
If you want to have a reverse order in smaller screens, you will have to modify the code again and duplicate the logo and navigation. The code might be this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================
$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();
?>
<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>
<div class="for-large-screens">
<div class="x-navbar-wrap">
<div class="<?php x_navbar_class(); ?>">
<div class="x-navbar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
</div>
</div>
</div>
</div>
<div class="x-logobar">
<div class="x-logobar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_brand' ); ?>
</div>
</div>
</div>
</div>
<div class="for-small-screens">
<div class="x-logobar">
<div class="x-logobar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_brand' ); ?>
</div>
</div>
</div>
<div class="x-navbar-wrap">
<div class="<?php x_navbar_class(); ?>">
<div class="x-navbar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
</div>
</div>
</div>
</div>
</div>
<?php else : ?>
<div class="x-navbar-wrap">
<div class="<?php x_navbar_class(); ?>">
<div class="x-navbar-inner">
<div class="x-container max width">
<?php x_get_view( 'global', '_brand' ); ?>
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
And then you also need this custom css to show hide the correct display:
.for-large-screens {
display: block;
}
.for-small-screens {
display: none;
}
@media(max-width: 979px){
.for-large-screens {
display: none;
}
.for-small-screens {
display: block;
}
}
We would love to know if this has worked for you. Thank you.
dear @RueNel!
thanks so much for helping out!
is it correct that i need to make 2 menus for this solution? like “mainmenu” and “mainmenu2”?
i really would want to avoid that.
so for now i only applied nabeels code which brings a problem for the mobile logo. i added a width for the logo which is being ignored. the logo is 646px and i want it displayed in half size 323px. but it is displayed in full size.
please have a look at the secure note.
thanks a lot and have a nice sunday! kai
Hi @iTurtle,
This can be done through jQuery too, but since it’s already implemented then please change your background size to cover. You have this existing CSS
@media (max-width: 979px)
.x-brand {
height: 190px;
width: 323px !important;
background: url(https://uwegaertner.iturtle.eu/wp-content/uploads/2019/05/Uwe-Gaertner-Fotograf-Inneneinrichter-Hamburg-2019-646-mobile.png) no-repeat center top;
margin-top: 0px;
}
Which appears on mobile view as a replacement for the actual image logo. The 323px is correct, the issue is the background size and it doesn’t work the same as standard image. You will have to add background-size: cover; too, like this
height: 190px;
width: 323px !important;
background: url(https://uwegaertner.iturtle.eu/wp-content/uploads/2019/05/Uwe-Gaertner-Fotograf-Inneneinrichter-Hamburg-2019-646-mobile.png) no-repeat center top;
margin-top: 0px;
background-size: cover;
Hope this helps.
thanks a lot @Rad!
i added:
background-size: cover;
and also set the height to 55px (which did the trick in the end) 
btw: i would suggest to make having a different (often smaller is required) logo a standard option in x.
best wishes, kai
Hey Kai,
Glad we could help and your request has been noted. Thank you for the feedback.
Cheers!
you are the best! i love your fast and friendly support! have a great day!
You’re most welcome Kai and thank you for your kind words.
Have a nice day 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.