Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 6, 2021 at 2:54 am #1323697
    aussiedropbear

    Hi,

    I need some assistance in formatting some sections in the small bar above the header.

    Presently I have a CTA with a listed phone number followed by a secondary menu that shows ‘solutions’ and ‘services’ that each link to a developer point further down on the home page. This works perfectly.

    A few problems:
    1. I am trying to align the all the text to be inline with one another
    2. secondary menu – I tried applying to have these two menu items bordered to stand out better from the menu settings – much like what I have in the main menu but it is not creating the border?
    3. In mobile view the two secondary items are grey in colour not white. This would also go for the border should we get it working.

    Any assistance is appreciated.

    Cheers
    John

    October 6, 2021 at 1:35 pm #1323767
    Mike

    Hey John,
    Thank you for the link to your site, for your first question it looks like the 5px padding is a little too much, 2px would correct. Your css file is merged so I believe this is custom css in your Quick CSS, if so please adjust and clear your cache
    2021-10-06_003.png
    If you can’t find it try adding this css:

    #header_meta .phone-info {
    padding: 2px 0
}

    To add a border around your two buttons try this css:

    #top #header_meta #menu-item-1093 > a,
#top #header_meta #menu-item-1094 > a {
    border: 2px solid;
    border-radius: 2px;
    border-color: #fff;
    padding: 0px 3px;
}

    but you will need to increase your header_meta for the new border to show, so add this:

    #top #wrap_all #header_meta {
    min-height: 50px;
    padding-top: 10px;
}

    After applying the css, please clear your browser cache and check the expected results screenshot below.

    Best regards,
    Mike

    October 6, 2021 at 11:41 pm #1323829
    aussiedropbear

    Awesome Mike. That works perfectly on PC but have a few issues on mobile view. See link in PC.

    Is it possible to either have them better spaced out on top of each other or side by side (may save some mobile space this way?) with sufficient padding between the buttons and top / bottom.

    I also need the text to be white if possible.

    Many thanks
    john

    –

    October 7, 2021 at 11:45 am #1323889
    Mike

    Hi,
    Thanks for the feedback, please try this css and also note to check while logged out so the admin toolbar doesn’t interfere

    @media only screen and (max-width: 767px) { 
#top #header_meta #menu-item-1093 > a,
#top #header_meta #menu-item-1094 > a {
    color:#fff;
}
#top #header_meta #menu-item-1093 {
    border-right-style: none;
}
#top #wrap_all #header #header_meta {
    padding-top: 15px;
}
}
@media only screen and (max-width: 420px) { 
#top #wrap_all #header #header_meta > .container {
    width: 100%;
    max-width: 100%;
}
}
@media only screen and (max-width: 354px) { 
#top #header_meta #menu-item-1093 > a,
#top #header_meta #menu-item-1094 > a {
    font-size: 20px !important;
}
}

    After applying the css, please clear your browser cache and check and also see the expected results screenshot below.

    Best regards,
    Mike

    October 10, 2021 at 11:16 pm #1324322
    aussiedropbear

    Thanks Mike.

    Works greats.

    When in mobile view, can I have the padding between the two boxes and the phone increased a little.

    I tried increasing the padding on:

    #header_meta .phone-info {
    padding: 2px 0
    }

    .. This works but then throws the center alignment we have in the other views for PC. So I guess we need something specific for the mobile view?

    Lastly, client is now wanting a third box for a direct link to either contact form or email address. I have added this to the menu however on mobile view it is stacked tightly before and wrong color etc.. I’m happy for this to be under the the other two boxes as I think that would work.

    Very much appreciate your assistance.

    Cheers
    john

    • This reply was modified 3 years, 1 month ago by aussiedropbear. Reason: last minute request to modify section by adding third box
    October 11, 2021 at 1:20 pm #1324417
    Mike

    Hi,
    Thanks for the screenshot, for the new button I assumed that you wanted the border around it and the same styling as the other two, so I added this, I also aligned the third button to be centered below the other two on mobile with this css:

    @media only screen and (max-width: 767px) { 
#top #header_meta #menu-item-1817 {
   display: flex;
    line-height: 38px;
    justify-content: center;
    padding: 10px 0;
}
}

    I believe this also solved the padding between the buttons and phone number, please clear your browser cache and check.

    Best regards,
    Mike

    October 11, 2021 at 10:53 pm #1324461
    aussiedropbear

    Hi Mike.

    Many thanks for doing this. Looks great on the mobile device now.

    Please close this thread.

    Cheers
    John

    October 12, 2021 at 7:10 am #1324494
    Rikard

    Hi John,

    Great, I’m glad that Mike could help you out. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Top header small bar menu and formatting’ is closed to new replies.