Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #17768

    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!

    #96757

    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

    #96758

    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;

    }

    #96759

    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!

    #96760

    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

    #96761

    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.

    #96762

    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

    #96763

    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?

    #96764

    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

    #96765

    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.

    #96766

    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

    #96767

    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.

    #96768

    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

    #96769

    Hello,

    Thanks for the code.

    It still doesn’t work :(

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

    Any other suggestions?

    Thanks

    #96770

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

    #96771

    Hi kizuri,

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

    Cheers,

    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Navigation bar above logo’ is closed to new replies.