[alwilleford]

Hi. Is there a way to move the navigation bar (the one above the header image) to below the promotional area?

Thanks

[Pratik]

HI @alwilleford,

It is possible via child theme. For that, first create a child theme. Details for child theme is here: http://catchthemes.com/blog/create-child-theme-wordpress/

After you have done so, and are comfortable with upgrading, let me know and I will help you further.

Regards,
Pratik

[alwilleford]

Ok, I think I have successfully created a child theme.

In addition to moving the navigation bar, I also wanted to ask if there is a way to get the logo, header top menu, and social icons all on the same horizontal space? I’m trying to save vertical space.

Thanks

[alwilleford]

Well…I thought I had the child theme created correctly, but when I went to activate it, my dashboard said that the child theme was installed but broken, that it was missing a style sheet??

I copied the code from the help link you sent and edited to fit clean journal.

[chanti]

I have used the below code for navigation bar.. But it leaves gaps between tabs. How to remove that?

.topnav {
  position:relative;
  z-index:2;
  font-size: 17px;
  background-color:#5f5f5f;
  color:#f1f1f1;
  width:100%;
  padding:0px:
  letter-spacing:1px;
 
}
.topnav a{
  padding:10px 15px 9px 15px !important;
  display:inline-block;
}
.topnav a:hover{
  background-color:#000000;
  color:#ffffff;
}
.topnav a.active {
  background-color:#73AD21;
  background-color:#157881;  
  color:#ffffff;
}
a.topnav-icons {
  width:52px;
  font-size:20px !important;
  padding-top:11px !important;
  padding-bottom:13px !important;
}
a.topnav-icons.fa-home {
  font-size:22px !important;
}
a.topnav-localicons {
  font-size:20px !important;
  padding-top:6px !important;
  padding-bottom:12px !important;
}

[Pratik]

Hi,

Can you post in your site url?

[alwilleford]

http://www.biblelambs.com (This is an old site that I design new sites under)

[chanti]

Hi,

Thanks for your response, but i got the solution for that. I have added float attribute in the CSS and resolved my issue. Can u help me with expandable trees.

Thanks

[Pratik]

HI @chanti,

What do you mean by expandable trees? can you explain this a bit.

About moving all logo, header top menu, and social icons all on the same horizontal space, it is possible, but you will need to hire a customizer as it will require a lot of modification and cannot be handled via CSS alone.

Regards,
Pratik

[alwilleford]

The initial question in this thread, I think has gotten lost 🙂 I created a child theme like you suggested to move the nav menu below the promotional message.

Can you help me in doing that? I will look into getting a customizer for moving the header and all to the same horizontal space.

There are two different users asking questions in this thread.

Amanda

[sezg]

Hello, I am interested in a response to this question as well. I’m using the Clean Journal theme and have a child theme set up. I want to move the nav-primary above the header, but there’s no clear template.

Template order: Header Top, Masthead, Primary Nav
Desitred order: Header top, Primary Nav, Masthead

In header.php I moved “do_action( ‘clean_journal_after_header’ );” above “do_action( ‘clean_journal_header’ );” which seems like a sloppy way to handle this. I then had to use negative margins in the css to switch header top with primary nav. Is there a correct way to handle?

Thanks for your help.

[Pratik]

Hi @alwilleford,
I am sorry, I thought I had posted a reply but somehow it did not get posted.

So for your solution, add this code in your child theme’s functions.php file: http://pastebin.com/wB1KdupN

———————————————————————————————————————–
Hi @sezg,

For your solution, discard the moving of do_action hooks and use this code in your functions.php file: http://pastebin.com/yi4Upnef

I hope this solves both your problems.

Regards,
Pratik

[sezg]

FANTASTIC. Very simple and works perfectly! This was exactly what I needed and doesn’t require CSS workarounds. Thanks so much for the excellent response and great service.

[alwilleford]

I tried adding the code to the functions.php and I couldn’t get it to work. It displayed code in the top header area. This is the code I have for my functions.php along with the code you sent. This is my first time at this, so please pardon my not knowing.

<?php
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>
function clean_journal_child_move_nav(){
remove_action( ‘clean_journal_after_header’, ‘clean_journal_primary_menu’, 20 );

add_action( ‘clean_journal_before_content’, ‘clean_journal_primary_menu’, 35 );
}
add_action( ‘init’, ‘clean_journal_child_move_nav’ );

I pulled the functions.php code from a help on wordpress. I tried editing it from saying “Twenty Fifteen” to clean journal but I missed something or did something wrong because the site went down until I changed it all back.

The site is http://www.biblelambs.com

Thanks for your help!!

[Pratik]

Hi @alwilleford,
Everything looks good except for just one error. It is in line 14. Remove ?> there and it will work.

What has happened is you have closed the ?> so, the swever thinks this is just plain code and gives raw output.

Let me know how it goes. If you have further trouble, do not hesitate to ask. I am here to help you.
—————————————————————————————————
Hi @sezg,
Thank you for your appreciation. If you liked our support and theme, please let us know by reviewing our theme at https://wordpress.org/support/theme/clean-journal/reviews/#new-post.

Regards,
Pratik

[alwilleford]

I took out the ?> on line 14. The code isn’t at the top, but the green navigation bar didn’t move either. I even activated a menu in the secondary menu location to see if it moved but it didn’t.

The menu location that I want to move below the promotional header is in the primary menu location. I may not have been clear on that early.

Currently the code is:

<?php
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function clean_journal_child_move_nav(){
remove_action( ‘clean_journal_after_header’, ‘clean_journal_primary_menu’, 20 );

add_action( ‘clean_journal_before_content’, ‘clean_journal_primary_menu’, 35 );
}
add_action( ‘init’, ‘clean_journal_child_move_nav’ );

and you can view the site at http://www.biblelambs.com

Thanks.

[Pratik]

Hi @alwilleford,

Strange. Can you share your whole child theme with me via dropbox or google drive?

[alwilleford]

I hope I shared the child theme folder correctly. I just copied my style.css and functions.php into a notepad document.

https://www.dropbox.com/sh/8a98dld2dkn76ys/AADJ8fycVGBIgv5qQgNCvC6Ua?dl=0

[Pratik]

HI @alwilleford,

This is strange. I tried the same thing in my site and it is working fine. The menu is below the Promotion Headline.

So for further resolution, I will require some more info. I will email you the details. Please wait for my email.

Regards,
Pratik

[Pratik]

Hi Amanda,

Check your site now. The problem was, when you copied and pasted the code, ' was converted to `, so there was a different interpretation. I fixed it for you.

Regards,
Pratik

[Author]

Posts