Home Forums Weaver Xtreme Theme How to position text on the top menu bar desktop & mobile

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #66317
    Arro
    Participant

    How may one add the same phone number text to the top menu bar on desktop and mobile as follows?

    Desktop position should be left of left-placed logo on menu bar. It currently is right of the desktop the menu bar logo.

    Mobile position should be right of logo on top menu bar which it is and its position is perfect but how can the phone number be made to automatically dial the phone when the phone number is tapped?

     

    Link to follow…

    #66318
    Private Reply
    Arro
    Participant
    This reply has been marked as private.
    #66319
    scrambler
    Moderator

    Add the CSS below to the theme Global Custom CSS Rule box
    .is-desktop .menu-primary .wvrx-menu-html {margin-left:-220px;}
    .is-desktop .menu-primary .custom-logo-on-menu {margin-left:120px;}

    Adjust the values to get the positioning your like

    As for the call on click this is a general HTML question you can find online, like the article below

    How to Create a Click to Call Link Using HTML and in WordPress

    #66330
    Arro
    Participant

    Sorry I didn’t explain well in the OP. I know how to create click to call but when I do that at Appearance > Main Options > Menus > Primary Menu Bar > Left HTML   it formats the phone number on the desktop menu bar and I only want to format the mobile phone number on the mobile menu bar.

    #66331
    scrambler
    Moderator

    If you need a different HTML for desktop and for mobile, you can use the showif shortcode using the device option.

    The shortcode syntax is explained in the Xtreme Admin Add ons page. It will look something like

    [show_if device=desktop]HTML for desktopt[/show_if]

    [show_if device=mobile]HTML for mobile[/show_if]

     

    #66332
    Arro
    Participant

    Wow, that is fantastic. Is there a way to specify conditionally that if a click to call hyperlink is displayed against the default blue menu bar background it should be #xxxxxx color? This is because the default hyperlink color over default page color is hard to see over default menu blue background color.

    #66333
    scrambler
    Moderator

    I believe click to call styling follows the link styling. SO to set specific link styling to the phone number, add a class in the html using the class attribute, then add CSS rule in the theme Global Custom CSS Rule box to style that class

    <a class="myphone" .....>.....

    Then add the rules below to the CSS Rule box

    a.myphone:link {color: red;}
    a.myphone:visited {color: green;}
    a.myphone:hover {color: hotpink;}
    a.myphone:active {color: blue;}

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.