Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #22306

    Hi,

    How can I add contact telephone number above the menu headings in this theme?

    Cheers, Chana

    #115342

    Hi Chana,

    If you mean in the main header, you would need to add that as new html content in the header.php file in the theme files.

    Regards,

    Devin

    #115343

    Hi devin,

    Could you please tell me where and what to write in the header.php file.

    Cheers, Chana

    #115344

    In header.php replace:

    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');

    with:

    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');
    echo "<div class='phonenumber'>000000</div>";

    and instead of 000000 insert your number. You can use the .phonenumber class to style the text. Eg insert following css code into the quick css field to change the text color:

    .phonenumber{
    color: #333333;
    }

    #115345

    Dude,

    I used the ‘theory’ from this to put our phone number in the header area (but placed it ‘above’ the logo code to keep it just below the “social bar”). But, we would like it a bit ‘tighter’ to the “social bar” above it (smaller spacing above top of number), and also because it is ‘pushing down’ our logo away from the “social bar”):

    http://visualimpactsystems.com/

    So, I put a negative number in the padding and nothing happened (a positive number did ‘push’ it down):

    .phonenumber{

    padding: -10px 0px 0px; color: #c20024; font-size: 18px; text-align: right;

    }

    Can the ‘top’ of the phone number ‘align’ with the ‘top’ of the logo? (and both be moved up closer to the bottom of the “social bar”).

    FYI: This is what is in the header.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 “<div class=’phonenumber’>248-548-7000</div>”;

    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

    */

    FYI: On an iPhone (with Chrome and Safari), in ‘landscape’ view the logo now is “centered” (was left justified before I added the phone number), and I have ‘lost’ my menu (“Home About Us Contact Us) that showed below the logo before the addition of the phone number.

    .

    Thanks,

    Mark Besh

    Visual Impact Systems

    #115346

    Dude,

    I put this code back into the custom.css to get the menu back, but now the ‘flashing’ has come back in IE:

    .js_active .main_menu ul{display: block !important;}

    Is there another ‘way’ (different code) to have this menu?

    Mark

    #115347

    Dude,

    We moved the menu code around, and it ended up working (no flashing) when it was in the middle of the file. Who knows on some of this stuff!

    Still would like to ‘move up’ the phone number and logo.

    Mark Besh

    Visual Impact Systems

    #115348

    Hi,

    You can add a negative top margin.

    .logo, .logo a {
    margin-top: -10px;
    }

    Same with your phone number.

    Regards,

    Ismael

    #115349

    Ismael,

    That worked great. Thanks.

    One more thing: On an iPhone, when the site is viewed in “landscape” mode, the logo moves to the middle. So, I tried adding the following “align=left” to the margin code you just gave me, but it didn’t work:

    .logo, .logo a {

    margin-top: -10px; align=left;

    }

    Suggestion?

    Mark Besh

    Visual Impact Systems

    #115350

    Hey!

    align=left is not a valid css syntax. Try:

    .logo, .logo a {
    margin-top: -10px; float: left;
    }

    instead.

    Best regards,

    Peter

    #115351

    Dude,

    For whatever reason, that seemed not to make the logo stay to the left when viewing in “landscape” mode on an iPhone. (It happens when the menu gets ‘pushed down’ below the logo).

    [Note: You can see what I mean by viewing the site in a browser, and making the width of the window smaller horizontally].

    http://visualimpactsystems.com/

    Is this ‘forced’ somewhere in .php code? OR, is there any ‘problems’ in our custom.css file? (missing or ‘stray’ commas/brackets or such):

    /* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

    #js_sort_items {

    font-size: 14px;

    }

    #top .template-dynamic .callout {

    padding: 4px 0 0px;

    }

    #top .template-dynamic .callout p {

    padding-bottom: 0;

    }

    #top .mobileMenu {

    display: none !important;

    }

    #top h1.ajax-portfolio-title {

    font-size: 2.3em;

    }

    .ajax-portfolio-response {

    z-index: 2;

    }

    @media only screen and (max-width: 767px) {

    .main_menu ul .sub-menu {

    visibility: none;

    opacity:0;

    display:block;

    }

    .js_active .main_menu ul{display: block !important;}

    #top .primary-background, .info_text_header, #info_text_header .infotext {

    background-color: #c20024 !important;

    }

    .ajax-portfolio-response-wrapper {

    top: 40px;

    }}

    #top .portfolio-title {

    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif; font-size: 14px;

    }

    .logo, .logo a {

    margin-top: -10px; float: left;

    }

    .phonenumber{

    color: #c20024; font-size: 18px; text-align: right;

    }

    .phonenumber, .phonenumber a {

    margin-top: -10px;

    }

    Thanks,

    Mark Besh

    #115352

    Hi!

    Insert following code into the quick css field:

    @media only screen and (max-width: 767px) {
    #top .logo{float: left; margin-left: 0; text-align: left;}
    }

    Regards,

    Peter

    #115353

    Dude,

    Hmmm. This fixed it when viewing in computer browsers and reducing the width of the browser window, but for whatever reason, it did not fix it for Chrome and Safari on an iPhone (OS6). [Cleared cache/history many times].

    Mark

    #115354

    Dude,

    This is the custom.css file.

    I put your code just after the other “media only screen…” code:

    /* Have fun adding your style here :) – PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

    #js_sort_items {

    font-size: 14px;

    }

    #top .template-dynamic .callout {

    padding: 4px 0 0px;

    }

    #top .template-dynamic .callout p {

    padding-bottom: 0;

    }

    #top .mobileMenu {

    display: none !important;

    }

    #top h1.ajax-portfolio-title {

    font-size: 2.3em;

    }

    .ajax-portfolio-response {

    z-index: 2;

    }

    @media only screen and (max-width: 767px) {

    .main_menu ul .sub-menu {

    visibility: none;

    opacity:0;

    display:block;

    }

    @media only screen and (max-width: 767px) {

    #top .logo{float: left; margin-left: 0; text-align: left;}

    }

    .js_active .main_menu ul{display: block !important;}

    #top .primary-background, .info_text_header, #info_text_header .infotext {

    background-color: #c20024 !important;

    }

    .ajax-portfolio-response-wrapper {

    top: 40px;

    }}

    #top .portfolio-title {

    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif; font-size: 14px;

    }

    .logo, .logo a {

    margin-top: -10px; float: left;

    }

    .phonenumber{

    color: #c20024; font-size: 18px; text-align: right;

    }

    .phonenumber, .phonenumber a {

    margin-top: -10px;

    }

    Mark

    #115355

    Hey!

    I’ll mark this thread for Devin because he can test your website on an ipad.

    Regards,

    Peter

    #115356

    Hi Mark,

    Tested on iPad and the phone number stays floated to the right on all views that I can see.

    Regards,

    Devin

    #115357

    Guys,

    The phone number is just fine, it’s the logo that doesn’t stay ‘left justified’ (it centers itself in ‘landscape’ view—only on the iPhone—tablets are fine, since they are ‘wide’ enough for this not to happen). [ Note: You can see the issue on a computer by just reducing the size of a browser window’s width until the menu goes below the logo—that’s when the logo centers itself).

    Mark

    #115358

    Hi,

    I can see the problem. Use this then

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block;
    }

    Regards,

    Ismael

    #115359

    Ismael,

    Sorry to be a bother, but it is still ‘centering’ the logo with Chrome and Safari with iOS6 and with IE10 on the PC (all other browsers, both PC and Mac now render it properly to the left). [Cleared all data/histories many times].

    I tried it two ways:

    Adding your new code to what I had…

    =======

    @media only screen and (max-width: 767px) {

    .main_menu ul .sub-menu {

    visibility: none;

    opacity:0;

    display:block;

    }

    @media only screen and (max-width: 767px) {

    #top .logo{float: left; margin-left: 0; text-align: left;}

    }

    @media only screen and (max-width: 767px)

    #top .logo a, #top .logo img {

    display: block;

    }

    =======

    and removing the previous suggestion, and just putting your new code in…

    ======

    @media only screen and (max-width: 767px) {

    .main_menu ul .sub-menu {

    visibility: none;

    opacity:0;

    display:block;

    }

    @media only screen and (max-width: 767px)

    #top .logo a, #top .logo img {

    display: block;

    }

    ======

    Neither worked.

    Any other suggestions? [Is there something I can put in the ‘actual’ template code for the logo (.php?) to ‘force’ it to the left all the time?].

    Mark

    #115360

    Hi Mark,

    I’m not getting the logo centered on anything I test at this point. Including browser widths, devices and multiple browsers.

    Also note we can see your custom.css file live so no need to post it here (http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css).

    Regards,

    Devin

    #115361

    Devin,

    Here’s what we are seeing:

    Android:

    http://www.4vis.com/Android.jpg

    iPhone-Chrome:

    http://www.4vis.com/iPhone-Chrome.jpg

    iPhone-Safari:

    http://www.4vis.com/iPhone-Safari.jpg

    Now, we are focused on phones for this issue (since computers and tablets are wide enough not to have this issue), but I thought I would send you a pic of a PC with IE10 just to show you another way to see the issue easily:

    http://www.4vis.com/PC-IE10.jpg

    Thanks for your time on this.

    Mark

    #115362

    Hi,

    I’m sorry but I tried this code on your site and the logo is being left aligned automatically. Please try this one instead. Remove browser cache then reload the page.

    @media only screen and (max-width: 767px)
    #top .logo a, #top .logo img {
    display: block !important;
    }

    Thanks,

    Ismael

    #115363

    Ismael,

    Sorry for this ‘frustration’, but it doesn’t matter what we do (clear data/history; go to other sites first; etc.), just like before, it still ‘centers’ on the iPhone with Chrome and Safari, Android, and IE10 on the PC (though, with all other computer browsers, on both PC and Mac, when we reduce the width of the browser window, they all are left aligned!).

    Does this have something to do with how mobile browsers ‘process’/render web sites?

    Would you looking at out custom.css help? (maybe the ‘order’ of what we have in there should be changed?)

    http://visualimpactsystems.com/wp-content/themes/angular/css/custom.css

    Sorry for being a bother, but we picked you guys/Angular primarily for its mobile responsive qualities.

    Mark

    #115364

    Hi Mark,

    You can try something like this:

    @media only screen and (max-width: 767px){
    #top .logo a, #top .logo img {
    margin-left: -10px;
    }
    }

    Please try and make new topic from now on for issues as I just noticed this one has been pretty heavily derailed from its original topic. It just makes it much better for others searching for things.

    Regards,

    Devin

    #115365

    Devin,

    We even put a -40px value in there and the logo didn’t move a bit. (so, we put “display: block !important;” back in there).

    I will start a new thread on this.

    This issue closed.

    Mark

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

The topic ‘Add telephone number above menu headings’ is closed to new replies.