Navigation bar above logo

16 posts from 3 voices

• Started 6 months ago by kizuri
• Latest reply from Ismael
• This topic is not resolved

Tags:

No tags yet.

1. 

   kizuri
   Member

   Hello,

   My logo / header is larger than the standard one and causes the navigation bar to move to a different line (which I like).

   However, is there anyway that the navigation bar can move above the logo, and be aligned left?

   Many thanks!

   Posted 6 months ago #
2. 

   Ismael
   Moderator

   Hi,

   You can do something like this on your custom.css

   .logo, .logo a {
   float: left;
   clear: both;
   }
   
   .main_menu {
   float: left!important;
   clear: both!important;
   }

   Open header.php and find this code

   <?php
   
   						/*
   						*	display the theme logo by checking if the default css defined logo was overwritten in the backend.
   						*   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
   						*/
   						echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');
   
   						/*
   						*	display the main navigation menu
   						*   check if a description for submenu items was added and change the menu class accordingly
   						*   modify the output in your wordpress admin backend at appearance->menus
   						*/
   						echo "<div class='main_menu' data-selectname='".__('Select a page','avia_framework')."'>";
   						$args = array('theme_location'=>'avia', 'fallback_cb' => 'avia_fallback_menu', 'max_columns'=>4);
   						wp_nav_menu($args);
   						echo "</div>";
   
   						?>

   Replace it with

   <?php
   
   						/*
   						*	display the theme logo by checking if the default css defined logo was overwritten in the backend.
   						*   the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
   						*/
   
   						/*
   						*	display the main navigation menu
   						*   check if a description for submenu items was added and change the menu class accordingly
   						*   modify the output in your wordpress admin backend at appearance->menus
   						*/
   						echo "<div class='main_menu' data-selectname='".__('Select a page','avia_framework')."'>";
   						$args = array('theme_location'=>'avia', 'fallback_cb' => 'avia_fallback_menu', 'max_columns'=>4);
   						wp_nav_menu($args);
   						echo "</div>";
   
   						echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');
   
   						?>

   It still needs some adjustments. I'm sure you can work it out.

   Regards,
   Ismael

   Posted 6 months ago #
3. 

   kizuri
   Member

   Awesome! Thank you!

   For anyone interested, I managed to make the navigation "higher" (ie above the logo) by adding "Margin Bottom" to the code below:

   .main_menu ul:first-child > li > a {
   display: block;
   margin-left: 25px;
   padding: 10 10 3px;
   text-decoration: none;
   text-transform: uppercase;
   margin-bottom: 50px;
   }

   Posted 6 months ago #
4. 

   kizuri
   Member

   I 've noticed that when I now minimize the screen, when in the new position (navigation bar above the logo); neither the navigation bar nor logo are responsive.

   Do I need to add more code?

   Thanks!

   Posted 6 months ago #
5. 

   Ismael
   Moderator

   Hi kuzuri,

   Yes, you need additional code for making it responsive. Just add this code inside custom.css:
   

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {
   
   }

   Inside this code block, insert your code, this will only be applied on those devices which have a maximum width of 767px on their screen like mobile devices.

   Regards,
   Ismael

   Posted 6 months ago #
6. 

   kizuri
   Member

   Hi Ismael,

   I really appreciate your help! Could you please clarify what you mean by "inside this code block, insert your code"?

   I added this:

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {

   }

   to the custom css file that I accessed via FTP but it didn't seem to work. What am I doing wrong?

   Thanks so much.

   Posted 6 months ago #
7. 

   Ismael
   Moderator

   Hi,

   You can do it like this

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {
   
   .logo, .logo a {
   float: left;
   clear: both;
   }
   
   .main_menu {
   float: left!important;
   clear: both!important;
   }
   
   }

   Place the style inside the media queries.

   Regards,
   Ismael

   Posted 6 months ago #
8. 

   kizuri
   Member

   Thank you, I'm afraid it's still not resizing.

   Here is the Media Queries section of the .CSS which I found in the layout.css file:

   ---------------------------------------------------------------------------------------------------

   /* #Media Queries
   ================================================== */

   /* Smaller than standard 960 (devices and browsers) */
   @media only screen and (max-width: 959px) {}

   /* Tablet Portrait size to standard 960 (devices and browsers) */
   @media only screen and (min-width: 768px) and (max-width: 989px) {

   /*portfolio*/
   #top .portfolio-title{padding: 17px 13px;}
   .title-span{display:none;}
   }

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {

   /*banner msg*/
   .infotext_wrap{padding-right: 0 !important;}
   #info_text_header{z-index:160;}

   /*logo and menu*/
   #top .logo{float:none; margin:0 auto; display: block; text-align: center; width:100%;}
   #top .logo a, #top .logo img{display: inline; float:none;}
   #top .main_menu{width:100%;left:0;}
   #top .mobileMenu{width:100%; margin:0 0 10px 0; max-width:767px; padding:10px;}

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {

   .logo, .logo a {
   float: left;
   clear: both;
   }

   .main_menu {
   float: left!important;
   clear: both!important;
   }

   }

   /*title*/
   .title_container h1{padding-right:0;}
   .title_meta{position: relative; top:0; left:0; margin:0; width:300px;}
   .title_meta #s { width: 120px; }
   .title_container #searchform{width: 172px;}

   /*sidebar*/
   #top .inner_sidebar{border:none; padding:0;}

   /*quotes*/
   #top .pullquote, #top .inner_quote {
   width:auto;
   margin:1em 0 1em 50px;
   position: relative;
   left:0;
   top:0;
   }

   #top div .pullquote_left::before, #top div .pullquote_right::before {left: -54px;}
   #top .inner_quote {padding:0; margin:0;}
   #top .pullquote_boxed{margin:1em 0;}

   /*blog post*/
   #top .sidebar_left .post-title.offset-by-three{padding:0;}
   #top .minor-meta{display:inline-block;}
   #top #main .blog-meta{display:none;}
   #top .blog-meta .text-sep{display:inline-block;}
   #top .single-portfolio-entry .blog-meta .text-sep{display:none;}
   .post-format .flag-diamond{display:none;}
   .js_active .main_menu ul{display:none;}

   /*footer*/
   #top #socket .social_bookmarks {position: relative;top:0;}

   /*slideshow*/
   #top .slideshow_container.dynamic_element .slideshow_inner_caption {padding: 3%;height: 100%;width: 94%; font-size:13px; line-height: 1.5em; background:none;}
   #top div .slideshow_caption {width: 100%; background: rgba(0, 0, 0, 0.5); }

   /*grid*/
   #top .inner_slide .one_fifth,
   #top .inner_slide .one_fourth,
   #top .inner_slide .one_third,
   #top .inner_slide .two_fifth,
   #top .inner_slide .one_half,
   #top .inner_slide .three_fifth,
   #top .inner_slide .two_third,
   #top .inner_slide .three_fourth,
   #top .inner_slide .four_fifth { width: 100%; }

   /*portfolio*/
   .ajax-control{width:100%; left:-3px; right:auto;}
   #top .partner_list .flex_column{width:50%; margin:0; clear:none;}
   .portfolio-sort-container{overflow: visible !important;}

   /*related*/
   #top .related_posts .relThumb, #top .related-portfolio .relThumb{width:50%;}
   #top .related_posts .relThumb3, #top .related-portfolio .relThumb3{clear:both;}
   .relThumbTitle{padding-bottom:20px;}

   }

   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
   @media only screen and (min-width: 480px) and (max-width: 767px) {
   .ajax-control a { width: 138px;}
   }

   /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
   @media only screen and (max-width: 479px) {

   #top .slideshow_inner_caption h1{ font-size:14px; }
   .ajax-control a { width: 98px;}

   }

   ---------------------------------------------------------------------------------------------------

   Thank you

   PS: How do you quote from code in this forum?

   Posted 6 months ago #
9. 

   Ismael
   Moderator

   Hi kizuri,

   You can quote the code using backtick ` on the beginning and end of the code.

   I noticed in the code you posted there are 2:
   @media only screen and (max-width: 767px) {
   that are nested. You should remove this code:
   

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {
   .logo, .logo a {
   float: left;
   clear: both;
   }
   .main_menu {
   float: left!important;
   clear: both!important;
   }
   }

   and place it inside custom.css. All customizations are recommended to be placed inside custom.css or Quick CSS(inside the Styling tab in Theme Options).

   Regards,
   Ismael

   Posted 6 months ago #
10. 

    kizuri
    Member

    It's still not working :(

    And I've noticed on the services page, the images do not become responsive either.

    Thanks in advance for your help.

    Posted 6 months ago #
11. 

    Devin
    Moderator

    Hi kizuri,

    I'm not sure what changes you have made up to this point but I would start with re-uploading your layout.css just in case any change made to it have broken the basic theme responsiveness.

    Basically how it works is when you change the browser window size the theme checks the media queries to see if there is any new css to modify the now smaller screen. If there is, it gets applied.

    So with your menu changes, there needs to be a new rule(s) to position the menu where you want it.

    Without seeing your site live I can't say what the change needs to be in order to get things back to where you started but thats the gist of it.

    Keep any new css to your custom.css file or Quick CSS and you'll be able to keep track of changes and update your theme much easier.

    Regards,

    Devin

    Posted 6 months ago #
12. 

    kizuri
    Member

    Hi Devin,

    Thank you. I've reuploaded the file but there's no difference.

    My site is http://www.hummingbirdhall.org.

    Is there anyway you could take a look? Will there be a cost?

    Thank you.

    Posted 6 months ago #
13. 

    Ismael
    Moderator

    Hi kizuri,

    Try to replace your code in your custom.css with this code:
    

    @media only screen and (max-width: 767px) {
       .logo, .logo a {
          clear: both;
          float: left;
          margin: 0;
          padding: 0;
       }
    
       #top .logo a, #top .logo img {
          display: block;
          height: 153px;
          margin: 0 0 20px;
          padding: 12px 0 0;
          width: 478px;
       }
    
       #header .container {
          width: 100%;
       }
    }
    
    @media only screen and (max-width: 479px) {
       #top .logo a, #top .logo img {
          width: 318px;
       }
    }

    Hope this helps. :)

    Regards,
    Ismael

    Posted 6 months ago #
14. 

    kizuri
    Member

    Hello,

    Thanks for the code.

    It still doesn't work :(

    The header is not responsive, nor is the navigation bar.

    Any other suggestions?

    Thanks

    Posted 6 months ago #
15. 

    kizuri
    Member

    Ah! It works! THANK YOU SO MUCH. I really appreciate it :)

    Posted 6 months ago #
16. 

    Ismael
    Moderator

    Hi kizuri,

    Glad we could help. :) I think I forgot to tell to clear the cache.

    Cheers,
    Ismael

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.