How to put Logo on top menu bar with phone number next to it - Support

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

Author

Posts
March 28, 2019 at 9:59 pm #1084300

webguy007
Participant

Hi,

How exactly would I put the logo on the top menu bar with the phone number next to it? I’ve tried to do it myself and have had no success
I actually spent some hours in following: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and all that happens is the widget text is below and stays on the left side.

Can you please provide step by step or login to my system and make the changes?

Thanks so much!

April 1, 2019 at 8:20 am #1085322

Rikard
Keymaster

Hey webguy007,

Sorry for the late reply. I’ve added your logo next to the phone number. It’s a bit big though, I’m guessing you will want to change that in some way?

Best regards,
Rikard

April 1, 2019 at 4:32 pm #1085568

webguy007
Participant

Hi,

I need the logo to the left of the phone number and will need the phone number centered height wise to the right of the logo. Please also advise where exactly you made the modifications.

Thanks!

April 2, 2019 at 8:21 am #1085921

Rikard
Keymaster

Hi,

I added the image in the phone number field, you can move it before the number there.

Best regards,
Rikard

April 3, 2019 at 1:42 am #1086285

webguy007
Participant

Thank you for the information. However, the problem still exist with the phone number not being centered with the logo. The phone number sits on the bottom and is not positioned centered with the middle of the logo. How do I fix this? I’m not sure this can be done by using the method of putting the code in the header box?

April 4, 2019 at 7:14 am #1086794

Rikard
Keymaster

Hi,

It looks like you have remove the logo from the phone number field? We have to be able to see the actual results in order to help you out.

Best regards,
Rikard

April 11, 2019 at 5:50 am #1089393

webguy007
Participant

Hi,
I’m using revolution slider and in mobile view the top of the slider is getting clipped in every instance I have rev. slider being used at the top of every page.
I’m assuming this can be fixed with css. What’s the css code I would use?

Lastly, how do I have the slider fit everything it does on desktop view? You can see on mobile view the homepage top rev slider is cut off also on the bottom right has text.

Thanks!

April 16, 2019 at 4:40 am #1091198

Ismael
Moderator

Hi,

Thanks for the update.

Could you give us a mockup or the expected layout of the header so that we can understand what you’re after? You can upload the screenshot to imgur or dropbox.

Best regards,
Ismael

April 16, 2019 at 4:50 am #1091200

webguy007
Participant

Here are screenshots from iPhone XS Max. You will see the rev slider header image is cut off and half the top is missing compared to viewing on desktop. You will also notice the button Request A Demo is not centered inside the white box as it is in desktop mode.

Lastly the second picture also has the bottom right text box content completely cut off. Desktop is fine.

Hope this clarifies?

Thanks

April 16, 2019 at 7:55 pm #1091657

webguy007
Participant

Also how do I make a footer like the attached?

April 19, 2019 at 1:12 am #1092518
Ismael
Moderator
Hi,

Thanks for the update.

This css code should align the menu items with the logo on mobile view.
```
@media only screen and (max-width: 767px) {
    .responsive #top #header #header_main .inner-container .main_menu {
        position: absolute;
        top: 40px;
    }
}
```
Screenshot after adding the css code: https://imgur.com/a/8DiXZfj

Best regards,
Ismael
April 23, 2019 at 2:44 am #1093474

webguy007
Participant

Ismael,

I don’t think you fully responded to my questions:

April 16, 2019 at 4:50 am – #1091200

and more importantly this one: April 16, 2019 at 7:55 pm – #1091657

Thank you for your speedy reply to the above!

April 24, 2019 at 2:04 am #1093783

webguy007
Participant

When you login to the system to address the above two issues, I’ve also encountered an issue where the menu font line of – Welcome Solutions About Suport are bold for Solutions >Terminals and Solutions > Ecoomerce and I can’t figure out why? The phone number on the top bar left is also bold when only these two menu pages load. It should all be the same as the other menu pages which isn’t bold as you can see. Why and how to solve?

Thanks!

April 24, 2019 at 2:34 am #1093790

webguy007
Participant

When you login to the system to address the above two issues, I’ve also encountered an issue where the menu font line of – Welcome Solutions About Suport are bold for Solutions >Terminals and Solutions > Ecoomerce and I can’t figure out why? The phone number on the top bar left is also bold when only these two menu pages load. It should all be the same as the other menu pages which isn’t bold as you can see. Why and how to solve?

Also when viewing on mobile devices the slider revolution images are getting cut off below the menu. ie; Solutions > Terminals – slider is completely cut off and is behind the menu as when you pull down the mobile screen you can see it. How do I fix these problems here and the other submenu pages with the slider to format correctly?

Thanks!

April 24, 2019 at 5:43 am #1093845
Ismael
Moderator
Hi,

Thanks for the update.

1.) Did you set the header as a fixed container? You need to adjust the top padding of the main container in order to move it under the header. Add this css code inside the previous css media query.
```
.responsive #top #main {
    padding-top: 169px !important;
    margin: 0;
}
```
2.) Unfortunately, that type of footer is not possible by default. You can try to recreate it by setting a 3 column footer and adjusting the width of the first column. Or try to use css flex to re-align the columns. Unfortunately, that will require modification that is beyond the scope of support. Please a hire a freelance developer or contact our partner, Codeable.

3.) The following css code sets the font-weight of the phone number and the menu items to bold.
```
.phone-info {
    float: left;
    font-weight: bold;
    line-height: 20px;
    font-size: 11px;
    padding: 5px 0;
}

#top #header .av-main-nav > li > a {
    color: #000000;
    background-color: #fcfcfc;
    border-color: #f2f2f2;
    font-size: 18px;
    font-weight: bold;
}
```
Did you add that?

Best regards,
Ismael
April 24, 2019 at 8:37 pm #1094171

webguy007
Participant

Hi Ismael,

We are getting closer to solving the issues. I solved 1 with your code.

2. I wish Enfold team would look into being able to have much better footers per my example.

3. Yes that code I found in various places here on this forum. What I don’t understand is why the fonts are not staying the same and are only darker on the following links I will post below in the private area. You can clearly see the menu letters of Welcome – Solutions – About – Support are much darker on these speicifc pages and I don’t know why? The homepage they fonts are light for the menu as well as the phone number and this is what I want throughout the site.

4. On some pages viewing on mobile, the slider is cutt off on the sides and the text on the slider is too small to read. How do I solve this on the pages I’ve listed below?

April 26, 2019 at 1:55 am #1094571
webguy007
Participant
I wanted to update with the latest since it has been two days and you typically respond at night my time.

1. On the homepage, how do I add more space between the four sections of EPX Edge, New Payments Hub and Quick Funding and 24/7 Support? (IMAGE 2)

View post on imgur.com

2. How do I remove the blue outline and line down the center of the Green background box of pages as shown in this image? I have no clue where it’s picking up the blue line from as I made the box a cell in the widget footer.

View post on imgur.com

3. On the mobile menu, per the image. How do I make the submenu arrow down more black so that the user knows to click on it? I circled the area I’m talking about. Also where exactly would I change the blue background to another Hex color? https://imgur.com/a/LbzR1F5

4. On mobile, how do I fix the formatting of the word GET that should start below the image and should be on the same line as MORE FOR LESS?

View post on imgur.com

5. How do I make the Rev. Slider slides format correctly in mobile view? As you can see from these examples, they are cut off and or too small to read. In desktop view they are perfect.

6. How do I make the mobile menu appear to the right of the social media icons? It currently is showing the logo to the left which is correct, then the menu and social media icons. I need Logo left as it is set, social media icons then mobile menu to the far right. https://imgur.com/a/ldYtFY9

7. Please see private image link in Private Content below. Need to add space between phone icon and # and horizontal center the # to the Phone icon.

8. Please see private link content as to why certain pages menu and phone number are BOLD and some are not per the screenshot. Main Menu fonts are not bold for reference.

Thanks!
- This reply was modified 5 years, 7 months ago by webguy007.
April 26, 2019 at 7:18 am #1094621

Ismael
Moderator

Hi,

Thanks for the update.

We don’t entertain multiple questions or inquiries on a single thread. You can usually get a faster response if you don’t compile all your questions into a single ticket. Please open a single thread or ticket for each inquiry so that we can solve the problem one at a time.

Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.