Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 19, 2021 at 7:20 pm #1282307
    mmr1234

    Hey team! I want to add links to login to my courses and community in the top navigation bar. I’m using the phone number space to add the text “login:” so that what the buttons just read “courses” and “community.”

    This looks good on desktop, with the phone number space being added to the left of the menu, but on mobile, it lists the menu bar first, then the text underneath. It’s backwards.

    See here:

    2021-02-19_12-15-13.png

    Any idea how I can always have the phone number space list before the menu? Thanks!

    February 20, 2021 at 1:04 pm #1282438
    Victoria

    Hey mmr1234,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
    .responsive #header_meta .sub_menu>ul {
        float: left;
        width: 59%;
        text-align: center;
        margin: 0; 
        clear: none;
    }
    .responsive .phone-info {
         float: left;
         width: 30%;
         clear: none; 
         text-align: left;
    }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 20, 2021 at 2:18 pm #1282467
    mmr1234

    Thanks Victoria! It’s close, but that actually put the phone text field to the right of the menu, which is backward of what it does on desktop. Can we put it on the left of the menu?

    2021-02-19_12-15-13.png

    • This reply was modified 3 years, 10 months ago by mmr1234.
    February 20, 2021 at 7:37 pm #1282523
    Victoria

    Hi mmr1234,

    Please the code like this:

    
@media only screen and (max-width: 767px) {
    .responsive #header_meta .sub_menu>ul {
        float: right;
        width: 59%;
        text-align: center;
        margin: 0; 
        clear: none;
    }
    .responsive .phone-info {
         float: left;
         width: 30%;
         clear: none; 
         text-align: left;
    }
}

    Best regards,
    Victoria

    February 21, 2021 at 2:44 pm #1282604
    mmr1234

    Thank you again, Victoria! Awesome! This is perfectly acceptable, but is there any way to:

    1. Have the phone text field just to the left of the menu, and no large blank space in between?
    2. Can the menu be aligned with the left burger menu with no space?

    See: https://www.screencast.com/t/tBTllFDsY

    Thanks again if possible!

    February 24, 2021 at 3:42 pm #1283416
    Ismael

    Hi,

    Thank you for the update.

    We can use the following css code to adjust the position of the top menu and of the phone info, make sure to include the code inside the css media query that Victoria created and suggested above.

    .av_secondary_right .sub_menu {
	padding-left: 0;
}

.responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
	float: none;
	text-align: right;
	margin: 0;
	position: static;
	width: auto;
}

.responsive .phone-info {
	float: right;
	width: auto;
	clear: none;
	text-align: right;
}

.responsive #header_meta .sub_menu > ul {
	width: auto;
	text-align: right;
}

.responsive #header_meta .sub_menu > ul > li:last-child {
	padding-right: 0;
}

    Best regards,
    Ismael

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